From 3403ca413f6ec05a90bb9ec23b33a5f56c458a33 Mon Sep 17 00:00:00 2001 From: Taha Tesser Date: Wed, 21 Feb 2024 12:39:35 +0200 Subject: [PATCH] Update `hourMinuteTextStyle` defaults for Material 3 Time Picker (#143749) fixes [`hourMinuteTextStyle` Material 3 default doesn't match the specs](https://github.com/flutter/flutter/issues/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)); ``` --- .../lib/time_picker_template.dart | 10 ++++-- .../flutter/lib/src/material/time_picker.dart | 12 +++++-- .../lib/src/material/time_picker_theme.dart | 12 +++++-- .../test/material/time_picker_theme_test.dart | 34 +++++++++++++++---- 4 files changed, 55 insertions(+), 13 deletions(-) diff --git a/dev/tools/gen_defaults/lib/time_picker_template.dart b/dev/tools/gen_defaults/lib/time_picker_template.dart index 741c7f706fd..3c4aad5a8e1 100644 --- a/dev/tools/gen_defaults/lib/time_picker_template.dart +++ b/dev/tools/gen_defaults/lib/time_picker_template.dart @@ -19,9 +19,10 @@ class TimePickerTemplate extends TokenTemplate { @override String generate() => ''' class _${blockName}DefaultsM3 extends _TimePickerDefaults { - _${blockName}DefaultsM3(this.context); + _${blockName}DefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial }); final BuildContext context; + final TimePickerEntryMode entryMode; late final ColorScheme _colors = Theme.of(context).colorScheme; late final TextTheme _textTheme = Theme.of(context).textTheme; @@ -284,7 +285,12 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults { // TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed. // This is using the correct text style from Material 3 spec. // https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215 - return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)); + return switch (entryMode) { + TimePickerEntryMode.dial || TimePickerEntryMode.dialOnly + => _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)), + TimePickerEntryMode.input || TimePickerEntryMode.inputOnly + => _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)), + }; }); } diff --git a/packages/flutter/lib/src/material/time_picker.dart b/packages/flutter/lib/src/material/time_picker.dart index 7c3efb04e78..1fe8d502c43 100644 --- a/packages/flutter/lib/src/material/time_picker.dart +++ b/packages/flutter/lib/src/material/time_picker.dart @@ -2752,7 +2752,7 @@ class _TimePickerState extends State<_TimePicker> with RestorationMixin { assert(debugCheckHasMediaQuery(context)); final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context)); final ThemeData theme = Theme.of(context); - final _TimePickerDefaults defaultTheme = theme.useMaterial3 ? _TimePickerDefaultsM3(context) : _TimePickerDefaultsM2(context); + final _TimePickerDefaults defaultTheme = theme.useMaterial3 ? _TimePickerDefaultsM3(context, entryMode: widget.entryMode) : _TimePickerDefaultsM2(context); final Orientation orientation = _orientation.value ?? MediaQuery.orientationOf(context); final HourFormat timeOfDayHour = hourFormat(of: timeOfDayFormat); final _HourDialType hourMode = switch (timeOfDayHour) { @@ -3347,9 +3347,10 @@ class _TimePickerDefaultsM2 extends _TimePickerDefaults { // dev/tools/gen_defaults/bin/gen_defaults.dart. class _TimePickerDefaultsM3 extends _TimePickerDefaults { - _TimePickerDefaultsM3(this.context); + _TimePickerDefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial }); final BuildContext context; + final TimePickerEntryMode entryMode; late final ColorScheme _colors = Theme.of(context).colorScheme; late final TextTheme _textTheme = Theme.of(context).textTheme; @@ -3612,7 +3613,12 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults { // TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/131247 is fixed. // This is using the correct text style from Material 3 spec. // https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215 - return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)); + return switch (entryMode) { + TimePickerEntryMode.dial || TimePickerEntryMode.dialOnly + => _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states)), + TimePickerEntryMode.input || TimePickerEntryMode.inputOnly + => _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states)), + }; }); } diff --git a/packages/flutter/lib/src/material/time_picker_theme.dart b/packages/flutter/lib/src/material/time_picker_theme.dart index e9ec5f8bac4..1ba598ada4f 100644 --- a/packages/flutter/lib/src/material/time_picker_theme.dart +++ b/packages/flutter/lib/src/material/time_picker_theme.dart @@ -244,8 +244,16 @@ class TimePickerThemeData with Diagnosticable { /// Used to configure the [TextStyle]s for the hour/minute controls. /// - /// If this is null, the time picker defaults to the overall theme's - /// [TextTheme.headline3]. + /// If this is null and entry mode is [TimePickerEntryMode.dial], the time + /// picker defaults to the overall theme's [TextTheme.displayLarge] with + /// the value of [hourMinuteTextColor]. + /// + /// If this is null and entry mode is [TimePickerEntryMode.input], the time + /// picker defaults to the overall theme's [TextTheme.displayMedium] with + /// the value of [hourMinuteTextColor]. + /// + /// If this is null and [ThemeData.useMaterial3] is false, the time picker + /// defaults to the overall theme's [TextTheme.displayMedium]. final TextStyle? hourMinuteTextStyle; /// The input decoration theme for the [TextField]s in the time picker. diff --git a/packages/flutter/test/material/time_picker_theme_test.dart b/packages/flutter/test/material/time_picker_theme_test.dart index 22ae788eef1..a4098d4d24a 100644 --- a/packages/flutter/test/material/time_picker_theme_test.dart +++ b/packages/flutter/test/material/time_picker_theme_test.dart @@ -285,22 +285,22 @@ void main() { final RenderParagraph hourText = _textRenderParagraph(tester, '7'); expect( hourText.text.style, - Typography.material2021().englishLike.displayMedium! - .merge(Typography.material2021().black.displayMedium) + Typography.material2021().englishLike.displayLarge! + .merge(Typography.material2021().black.displayLarge) .copyWith( color: defaultTheme.colorScheme.onPrimaryContainer, - decorationColor: defaultTheme.colorScheme.onSurface + decorationColor: defaultTheme.colorScheme.onSurface, ), ); final RenderParagraph minuteText = _textRenderParagraph(tester, '15'); expect( minuteText.text.style, - Typography.material2021().englishLike.displayMedium! - .merge(Typography.material2021().black.displayMedium) + Typography.material2021().englishLike.displayLarge! + .merge(Typography.material2021().black.displayLarge) .copyWith( color: defaultTheme.colorScheme.onSurface, - decorationColor: defaultTheme.colorScheme.onSurface + decorationColor: defaultTheme.colorScheme.onSurface, ), ); @@ -457,6 +457,28 @@ void main() { await tester.tap(find.text('X')); await tester.pumpAndSettle(const Duration(seconds: 1)); + final TextStyle hourTextStyle = _textField(tester, '7').style!; + expect( + hourTextStyle, + Typography.material2021().englishLike.displayMedium! + .merge(Typography.material2021().black.displayMedium) + .copyWith( + color: defaultTheme.colorScheme.onSurface, + decorationColor: defaultTheme.colorScheme.onSurface, + ), + ); + + final TextStyle minuteTextStyle = _textField(tester, '15').style!; + expect( + minuteTextStyle, + Typography.material2021().englishLike.displayMedium! + .merge(Typography.material2021().black.displayMedium) + .copyWith( + color: defaultTheme.colorScheme.onSurface, + decorationColor: defaultTheme.colorScheme.onSurface, + ), + ); + final InputDecoration hourDecoration = _textField(tester, '7').decoration!; expect(hourDecoration.filled, true); expect(hourDecoration.fillColor, defaultTheme.colorScheme.surfaceContainerHighest);