fix: improve the UI for small devices

This commit is contained in:
Freek van de Ven 2025-05-07 11:21:09 +02:00 committed by Freek van de Ven
parent 9487cf2e57
commit 79d292cf4a
7 changed files with 67 additions and 51 deletions

View file

@ -1,3 +1,7 @@
## 1.2.0
* Improve the UI for smaller screens to prevent overflows
## 1.1.1 ## 1.1.1
* Removed custom definition of CustomSemantics to use the one from flutter_accessibility instead * Removed custom definition of CustomSemantics to use the one from flutter_accessibility instead

View file

@ -70,9 +70,11 @@ class AvailabilityClearSection extends StatelessWidget {
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Text( Expanded(
unavailableText, child: Text(
style: textTheme.bodyMedium, unavailableText,
style: textTheme.bodyMedium,
),
), ),
], ],
), ),

View file

@ -73,47 +73,52 @@ class CalendarView extends StatelessWidget {
(element) => element.templateDeviation, (element) => element.templateDeviation,
); );
var monthDateSelector = Row( var monthDateSelector = LayoutBuilder(
mainAxisAlignment: MainAxisAlignment.center, builder: (context, constraints) {
children: [ var monthWidth =
CustomSemantics( _calculateTextWidthOfLongestMonth(context, translations);
identifier: identifiers.previousMonthButtonIdentifier, var sideSpace =
child: IconButton( ((constraints.maxWidth - monthWidth) / 2 - 44).clamp(0.0, 44.0);
padding: EdgeInsets.zero,
icon: const Icon(Icons.chevron_left), return Row(
onPressed: () { mainAxisAlignment: MainAxisAlignment.center,
onMonthChanged( children: [
DateTime(month.year, month.month - 1), CustomSemantics(
); identifier: identifiers.previousMonthButtonIdentifier,
}, child: IconButton(
), padding: EdgeInsets.zero,
), icon: const Icon(Icons.chevron_left),
const SizedBox(width: 44), onPressed: () {
SizedBox( onMonthChanged(DateTime(month.year, month.month - 1));
width: _calculateTextWidthOfLongestMonth(context, translations), },
child: CustomSemantics( ),
identifier: identifiers.monthNameTextIdentifier,
child: Text(
translations.monthYearFormatter(context, month),
style: textTheme.titleMedium,
textAlign: TextAlign.center,
), ),
), SizedBox(width: sideSpace),
), SizedBox(
const SizedBox(width: 44), width: monthWidth,
CustomSemantics( child: CustomSemantics(
identifier: identifiers.nextMonthButtonIdentifier, identifier: identifiers.monthNameTextIdentifier,
child: IconButton( child: Text(
padding: EdgeInsets.zero, translations.monthYearFormatter(context, month),
icon: const Icon(Icons.chevron_right), style: textTheme.titleMedium,
onPressed: () { textAlign: TextAlign.center,
onMonthChanged( ),
DateTime(month.year, month.month + 1), ),
); ),
}, SizedBox(width: sideSpace),
), CustomSemantics(
), identifier: identifiers.nextMonthButtonIdentifier,
], child: IconButton(
padding: EdgeInsets.zero,
icon: const Icon(Icons.chevron_right),
onPressed: () {
onMonthChanged(DateTime(month.year, month.month + 1));
},
),
),
],
);
},
); );
var calendarGrid = CalendarGrid( var calendarGrid = CalendarGrid(

View file

@ -167,9 +167,12 @@ class _CalendarDay extends StatelessWidget {
children: [ children: [
Center( Center(
child: Container( child: Container(
padding: const EdgeInsets.symmetric(horizontal: 4), padding: const EdgeInsets.symmetric(horizontal: 2),
decoration: decoration, decoration: decoration,
child: Text(day.date.day.toString(), style: textStyle), child: Text(
day.date.day.toString(),
style: textStyle,
),
), ),
), ),
if (day.templateDeviation) ...[ if (day.templateDeviation) ...[

View file

@ -76,9 +76,11 @@ class _TemplateLegendState extends State<TemplateLegend> {
const SizedBox(width: 12), const SizedBox(width: 12),
const Icon(Icons.add, size: 20), const Icon(Icons.add, size: 20),
const SizedBox(width: 6), const SizedBox(width: 6),
Text( Expanded(
translations.createTemplateButton, child: Text(
style: textTheme.bodyLarge, translations.createTemplateButton,
style: textTheme.bodyLarge,
),
), ),
], ],
), ),

View file

@ -1,6 +1,6 @@
name: flutter_availability name: flutter_availability
description: "Flutter availability userstory package" description: "Flutter availability userstory package"
version: 1.1.1 version: 1.2.0
publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub
@ -14,7 +14,7 @@ dependencies:
flutter_hooks: ^0.20.5 flutter_hooks: ^0.20.5
flutter_availability_data_interface: flutter_availability_data_interface:
hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
version: ^1.1.1 version: ^1.2.0
flutter_accessibility: flutter_accessibility:
hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub hosted: https://forgejo.internal.iconica.nl/api/packages/internal/pub
version: ^0.0.3 version: ^0.0.3

View file

@ -1,6 +1,6 @@
name: flutter_availability_data_interface name: flutter_availability_data_interface
description: "The data interface for the flutter_availability component" description: "The data interface for the flutter_availability component"
version: 1.1.1 version: 1.2.0
publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub publish_to: https://forgejo.internal.iconica.nl/api/packages/internal/pub