development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-07-16 10:29:14 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update hourMinuteTextStyle defaults for Material 3 Time Picker (#143749)

Browse source 
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));
```
This commit is contained in:
Taha Tesser 2024-02-21 12:39:35 +02:00 committed by GitHub
parent 35fd706256
commit 3403ca413f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 55 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
dev/tools/gen_defaults/lib/time_picker_template.dart
View file

@ -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)),
};
});
}

12
packages/flutter/lib/src/material/time_picker.dart
View file

@ -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)),
};
});
}

12
packages/flutter/lib/src/material/time_picker_theme.dart
View file

@ -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.

34
packages/flutter/test/material/time_picker_theme_test.dart
View file

@ -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);