DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix TimePicker input mode width for 12-hour format (#122868)

Browse Source 
Fix `TimePicker` input mode width for 12-hour format
This commit is contained in:
Taha Tesser 2023-03-20 20:09:49 +02:00 committed by GitHub
parent 0117de40d8
commit 8679aeb235
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 164 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/flutter/lib/src/material/time_picker.dart
View File

@ -2338,7 +2338,7 @@ class _TimePickerDialogState extends State<TimePickerDialog> with RestorationMix
break;
case TimeOfDayFormat.a_space_h_colon_mm:
case TimeOfDayFormat.h_colon_mm_space_a:
timePickerWidth = _kTimePickerMinInputSize.width;
timePickerWidth = _kTimePickerMinInputSize.width - (useMaterial3 ? 32 : 0);
break;
}
return Size(timePickerWidth, _kTimePickerMinInputSize.height);
@ -2383,7 +2383,7 @@ class _TimePickerDialogState extends State<TimePickerDialog> with RestorationMix
break;
case TimeOfDayFormat.a_space_h_colon_mm:
case TimeOfDayFormat.h_colon_mm_space_a:
timePickerWidth = _kTimePickerInputSize.width;
timePickerWidth = _kTimePickerInputSize.width - (useMaterial3 ? 32 : 0);
break;
}
timePickerSize = Size(timePickerWidth, _kTimePickerInputSize.height);
@ -2457,7 +2457,6 @@ class _TimePickerDialogState extends State<TimePickerDialog> with RestorationMix
tapTargetSizeOffset = const Offset(0, -12);
break;
}
final Size dialogSize = _dialogSize(context, useMaterial3: theme.useMaterial3) + tapTargetSizeOffset;
final Size minDialogSize = _minDialogSize(context, useMaterial3: theme.useMaterial3) + tapTargetSizeOffset;
return Dialog(

162
packages/flutter/test/material/time_picker_test.dart
View File

@ -281,6 +281,10 @@ void main() {
});
group('Dialog (${materialType.name})', () {
Material getMaterialFromDialog(WidgetTester tester) {
return tester.widget<Material>(find.descendant(of: find.byType(Dialog), matching: find.byType(Material)).first);
}
testWidgets('Widgets have correct label capitalization', (WidgetTester tester) async {
await startPicker(tester, (TimeOfDay? time) {}, materialType: materialType);
expect(find.text(selectTimeString), findsOneWidget);
@ -313,6 +317,84 @@ void main() {
switch (materialType) {
case MaterialType.material2:
testWidgets('Dialog size - dial mode', (WidgetTester tester) async {
addTearDown(tester.view.reset);
const Size timePickerPortraitSize = Size(310, 468);
const Size timePickerLandscapeSize = Size(524, 342);
const Size timePickerLandscapeSizeM2 = Size(508, 300);
const EdgeInsets padding = EdgeInsets.fromLTRB(8, 18, 8, 8);
double width;
double height;
// portrait
tester.view.physicalSize = const Size(800, 800.5);
tester.view.devicePixelRatio = 1;
await mediaQueryBoilerplate(tester, materialType: materialType);
width = timePickerPortraitSize.width + padding.horizontal;
height = timePickerPortraitSize.height + padding.vertical;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
await tester.tap(find.text(okString)); // dismiss the dialog
await tester.pumpAndSettle();
// landscape
tester.view.physicalSize = const Size(800.5, 800);
tester.view.devicePixelRatio = 1;
await mediaQueryBoilerplate(
tester,
alwaysUse24HourFormat: true,
materialType: materialType,
);
width = timePickerLandscapeSize.width + padding.horizontal;
height = timePickerLandscapeSizeM2.height + padding.vertical;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
});
testWidgets('Dialog size - input mode', (WidgetTester tester) async {
const TimePickerEntryMode entryMode = TimePickerEntryMode.input;
const Size timePickerInputSize = Size(312, 216);
const Size dayPeriodPortraitSize = Size(52, 80);
const EdgeInsets padding = EdgeInsets.fromLTRB(8, 18, 8, 8);
final double height = timePickerInputSize.height + padding.vertical;
double width;
await mediaQueryBoilerplate(
tester,
entryMode: entryMode,
materialType: materialType,
);
width = timePickerInputSize.width + padding.horizontal;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
await tester.tap(find.text(okString)); // dismiss the dialog
await tester.pumpAndSettle();
await mediaQueryBoilerplate(
tester,
alwaysUse24HourFormat: true,
entryMode: entryMode,
materialType: materialType,
);
width = timePickerInputSize.width - dayPeriodPortraitSize.width - 12 + padding.horizontal + 16;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
});
testWidgets('respects MediaQueryData.alwaysUse24HourFormat == true', (WidgetTester tester) async {
await mediaQueryBoilerplate(tester, alwaysUse24HourFormat: true, materialType: materialType);
@ -333,6 +415,86 @@ void main() {
});
break;
case MaterialType.material3:
testWidgets('Dialog size - dial mode', (WidgetTester tester) async {
addTearDown(tester.view.reset);
const Size timePickerPortraitSize = Size(310, 468);
const Size timePickerLandscapeSize = Size(524, 342);
const EdgeInsets padding = EdgeInsets.all(24.0);
double width;
double height;
// portrait
tester.view.physicalSize = const Size(800, 800.5);
tester.view.devicePixelRatio = 1;
await mediaQueryBoilerplate(tester, materialType: materialType);
width = timePickerPortraitSize.width + padding.horizontal;
height = timePickerPortraitSize.height + padding.vertical;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
await tester.tap(find.text(okString)); // dismiss the dialog
await tester.pumpAndSettle();
// landscape
tester.view.physicalSize = const Size(800.5, 800);
tester.view.devicePixelRatio = 1;
await mediaQueryBoilerplate(
tester,
alwaysUse24HourFormat: true,
materialType: materialType,
);
width = timePickerLandscapeSize.width + padding.horizontal;
height = timePickerLandscapeSize.height + padding.vertical;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
});
testWidgets('Dialog size - input mode', (WidgetTester tester) async {
final ThemeData theme = ThemeData(useMaterial3: true);
const TimePickerEntryMode entryMode = TimePickerEntryMode.input;
const double textScaleFactor = 1.0;
const Size timePickerMinInputSize = Size(312, 216);
const Size dayPeriodPortraitSize = Size(52, 80);
const EdgeInsets padding = EdgeInsets.all(24.0);
final double height = timePickerMinInputSize.height * textScaleFactor + padding.vertical;
double width;
await mediaQueryBoilerplate(
tester,
entryMode: entryMode,
materialType: materialType,
);
width = timePickerMinInputSize.width - (theme.useMaterial3 ? 32 : 0) + padding.horizontal;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
await tester.tap(find.text(okString)); // dismiss the dialog
await tester.pumpAndSettle();
await mediaQueryBoilerplate(
tester,
alwaysUse24HourFormat: true,
entryMode: entryMode,
materialType: materialType,
);
width = timePickerMinInputSize.width - dayPeriodPortraitSize.width - 12 + padding.horizontal;
expect(
tester.getSize(find.byWidget(getMaterialFromDialog(tester))),
Size(width, height),
);
});
testWidgets('respects MediaQueryData.alwaysUse24HourFormat == true', (WidgetTester tester) async {
await mediaQueryBoilerplate(tester, alwaysUse24HourFormat: true, materialType: materialType);