Skip to content

Commit 3403ca4

Browse files
authored
Update hourMinuteTextStyle defaults for Material 3 Time Picker (#143749)
fixes [`hourMinuteTextStyle` Material 3 default doesn't match the specs](#143748) This updates `hourMinuteTextStyle` defaults to match Material 3 specs. `hourMinuteTextStyle` should use different font style for different entry modes based on the specs. ### Specs ![Screenshot 2024-02-20 at 15 06 40](https://github.com/flutter/flutter/assets/48603081/5198a5da-314d-401e-8d7f-d4a68b86e43c) ![Screenshot 2024-02-20 at 15 07 22](https://github.com/flutter/flutter/assets/48603081/79436ce4-fef6-480a-bc43-b628497e860f) ### Before ```dart return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)); ``` ### After ```dart return entryMode == TimePickerEntryMode.dial ? _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)) : _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)); ```
1 parent 35fd706 commit 3403ca4

File tree

4 files changed

+55
-13
lines changed

4 files changed

+55
-13
lines changed

dev/tools/gen_defaults/lib/time_picker_template.dart

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ class TimePickerTemplate extends TokenTemplate {
1919
@override
2020
String generate() => '''
2121
class _${blockName}DefaultsM3 extends _TimePickerDefaults {
22-
_${blockName}DefaultsM3(this.context);
22+
_${blockName}DefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial });
2323
2424
final BuildContext context;
25+
final TimePickerEntryMode entryMode;
2526
2627
late final ColorScheme _colors = Theme.of(context).colorScheme;
2728
late final TextTheme _textTheme = Theme.of(context).textTheme;
@@ -284,7 +285,12 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
284285
// TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed.
285286
// This is using the correct text style from Material 3 spec.
286287
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
287-
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
288+
return switch (entryMode) {
289+
TimePickerEntryMode.dial || TimePickerEntryMode.dialOnly
290+
=> _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)),
291+
TimePickerEntryMode.input || TimePickerEntryMode.inputOnly
292+
=> _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)),
293+
};
288294
});
289295
}
290296

packages/flutter/lib/src/material/time_picker.dart

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2752,7 +2752,7 @@ class _TimePickerState extends State<_TimePicker> with RestorationMixin {
27522752
assert(debugCheckHasMediaQuery(context));
27532753
final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context));
27542754
final ThemeData theme = Theme.of(context);
2755-
final _TimePickerDefaults defaultTheme = theme.useMaterial3 ? _TimePickerDefaultsM3(context) : _TimePickerDefaultsM2(context);
2755+
final _TimePickerDefaults defaultTheme = theme.useMaterial3 ? _TimePickerDefaultsM3(context, entryMode: widget.entryMode) : _TimePickerDefaultsM2(context);
27562756
final Orientation orientation = _orientation.value ?? MediaQuery.orientationOf(context);
27572757
final HourFormat timeOfDayHour = hourFormat(of: timeOfDayFormat);
27582758
final _HourDialType hourMode = switch (timeOfDayHour) {
@@ -3347,9 +3347,10 @@ class _TimePickerDefaultsM2 extends _TimePickerDefaults {
33473347
// dev/tools/gen_defaults/bin/gen_defaults.dart.
33483348

33493349
class _TimePickerDefaultsM3 extends _TimePickerDefaults {
3350-
_TimePickerDefaultsM3(this.context);
3350+
_TimePickerDefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial });
33513351

33523352
final BuildContext context;
3353+
final TimePickerEntryMode entryMode;
33533354

33543355
late final ColorScheme _colors = Theme.of(context).colorScheme;
33553356
late final TextTheme _textTheme = Theme.of(context).textTheme;
@@ -3612,7 +3613,12 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
36123613
// TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed.
36133614
// This is using the correct text style from Material 3 spec.
36143615
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
3615-
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
3616+
return switch (entryMode) {
3617+
TimePickerEntryMode.dial || TimePickerEntryMode.dialOnly
3618+
=> _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)),
3619+
TimePickerEntryMode.input || TimePickerEntryMode.inputOnly
3620+
=> _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)),
3621+
};
36163622
});
36173623
}
36183624

packages/flutter/lib/src/material/time_picker_theme.dart

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,8 +244,16 @@ class TimePickerThemeData with Diagnosticable {
244244

245245
/// Used to configure the [TextStyle]s for the hour/minute controls.
246246
///
247-
/// If this is null, the time picker defaults to the overall theme's
248-
/// [TextTheme.headline3].
247+
/// If this is null and entry mode is [TimePickerEntryMode.dial], the time
248+
/// picker defaults to the overall theme's [TextTheme.displayLarge] with
249+
/// the value of [hourMinuteTextColor].
250+
///
251+
/// If this is null and entry mode is [TimePickerEntryMode.input], the time
252+
/// picker defaults to the overall theme's [TextTheme.displayMedium] with
253+
/// the value of [hourMinuteTextColor].
254+
///
255+
/// If this is null and [ThemeData.useMaterial3] is false, the time picker
256+
/// defaults to the overall theme's [TextTheme.displayMedium].
249257
final TextStyle? hourMinuteTextStyle;
250258

251259
/// The input decoration theme for the [TextField]s in the time picker.

packages/flutter/test/material/time_picker_theme_test.dart

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -285,22 +285,22 @@ void main() {
285285
final RenderParagraph hourText = _textRenderParagraph(tester, '7');
286286
expect(
287287
hourText.text.style,
288-
Typography.material2021().englishLike.displayMedium!
289-
.merge(Typography.material2021().black.displayMedium)
288+
Typography.material2021().englishLike.displayLarge!
289+
.merge(Typography.material2021().black.displayLarge)
290290
.copyWith(
291291
color: defaultTheme.colorScheme.onPrimaryContainer,
292-
decorationColor: defaultTheme.colorScheme.onSurface
292+
decorationColor: defaultTheme.colorScheme.onSurface,
293293
),
294294
);
295295

296296
final RenderParagraph minuteText = _textRenderParagraph(tester, '15');
297297
expect(
298298
minuteText.text.style,
299-
Typography.material2021().englishLike.displayMedium!
300-
.merge(Typography.material2021().black.displayMedium)
299+
Typography.material2021().englishLike.displayLarge!
300+
.merge(Typography.material2021().black.displayLarge)
301301
.copyWith(
302302
color: defaultTheme.colorScheme.onSurface,
303-
decorationColor: defaultTheme.colorScheme.onSurface
303+
decorationColor: defaultTheme.colorScheme.onSurface,
304304
),
305305
);
306306

@@ -457,6 +457,28 @@ void main() {
457457
await tester.tap(find.text('X'));
458458
await tester.pumpAndSettle(const Duration(seconds: 1));
459459

460+
final TextStyle hourTextStyle = _textField(tester, '7').style!;
461+
expect(
462+
hourTextStyle,
463+
Typography.material2021().englishLike.displayMedium!
464+
.merge(Typography.material2021().black.displayMedium)
465+
.copyWith(
466+
color: defaultTheme.colorScheme.onSurface,
467+
decorationColor: defaultTheme.colorScheme.onSurface,
468+
),
469+
);
470+
471+
final TextStyle minuteTextStyle = _textField(tester, '15').style!;
472+
expect(
473+
minuteTextStyle,
474+
Typography.material2021().englishLike.displayMedium!
475+
.merge(Typography.material2021().black.displayMedium)
476+
.copyWith(
477+
color: defaultTheme.colorScheme.onSurface,
478+
decorationColor: defaultTheme.colorScheme.onSurface,
479+
),
480+
);
481+
460482
final InputDecoration hourDecoration = _textField(tester, '7').decoration!;
461483
expect(hourDecoration.filled, true);
462484
expect(hourDecoration.fillColor, defaultTheme.colorScheme.surfaceContainerHighest);

0 commit comments

Comments
 (0)