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   ### 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:
parent
35fd706256
commit
3403ca413f
@ -19,9 +19,10 @@ class TimePickerTemplate extends TokenTemplate {
|
|||||||
@override
|
@override
|
||||||
String generate() => '''
|
String generate() => '''
|
||||||
class _${blockName}DefaultsM3 extends _TimePickerDefaults {
|
class _${blockName}DefaultsM3 extends _TimePickerDefaults {
|
||||||
_${blockName}DefaultsM3(this.context);
|
_${blockName}DefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial });
|
||||||
|
|
||||||
final BuildContext context;
|
final BuildContext context;
|
||||||
|
final TimePickerEntryMode entryMode;
|
||||||
|
|
||||||
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
||||||
late final TextTheme _textTheme = Theme.of(context).textTheme;
|
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.
|
// 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.
|
// This is using the correct text style from Material 3 spec.
|
||||||
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
|
// 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)),
|
||||||
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2752,7 +2752,7 @@ class _TimePickerState extends State<_TimePicker> with RestorationMixin {
|
|||||||
assert(debugCheckHasMediaQuery(context));
|
assert(debugCheckHasMediaQuery(context));
|
||||||
final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context));
|
final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context));
|
||||||
final ThemeData theme = Theme.of(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 Orientation orientation = _orientation.value ?? MediaQuery.orientationOf(context);
|
||||||
final HourFormat timeOfDayHour = hourFormat(of: timeOfDayFormat);
|
final HourFormat timeOfDayHour = hourFormat(of: timeOfDayFormat);
|
||||||
final _HourDialType hourMode = switch (timeOfDayHour) {
|
final _HourDialType hourMode = switch (timeOfDayHour) {
|
||||||
@ -3347,9 +3347,10 @@ class _TimePickerDefaultsM2 extends _TimePickerDefaults {
|
|||||||
// dev/tools/gen_defaults/bin/gen_defaults.dart.
|
// dev/tools/gen_defaults/bin/gen_defaults.dart.
|
||||||
|
|
||||||
class _TimePickerDefaultsM3 extends _TimePickerDefaults {
|
class _TimePickerDefaultsM3 extends _TimePickerDefaults {
|
||||||
_TimePickerDefaultsM3(this.context);
|
_TimePickerDefaultsM3(this.context, { this.entryMode = TimePickerEntryMode.dial });
|
||||||
|
|
||||||
final BuildContext context;
|
final BuildContext context;
|
||||||
|
final TimePickerEntryMode entryMode;
|
||||||
|
|
||||||
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
||||||
late final TextTheme _textTheme = Theme.of(context).textTheme;
|
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.
|
// 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.
|
// This is using the correct text style from Material 3 spec.
|
||||||
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
|
// 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)),
|
||||||
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -244,8 +244,16 @@ class TimePickerThemeData with Diagnosticable {
|
|||||||
|
|
||||||
/// Used to configure the [TextStyle]s for the hour/minute controls.
|
/// Used to configure the [TextStyle]s for the hour/minute controls.
|
||||||
///
|
///
|
||||||
/// If this is null, the time picker defaults to the overall theme's
|
/// If this is null and entry mode is [TimePickerEntryMode.dial], the time
|
||||||
/// [TextTheme.headline3].
|
/// 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;
|
final TextStyle? hourMinuteTextStyle;
|
||||||
|
|
||||||
/// The input decoration theme for the [TextField]s in the time picker.
|
/// The input decoration theme for the [TextField]s in the time picker.
|
||||||
|
@ -285,22 +285,22 @@ void main() {
|
|||||||
final RenderParagraph hourText = _textRenderParagraph(tester, '7');
|
final RenderParagraph hourText = _textRenderParagraph(tester, '7');
|
||||||
expect(
|
expect(
|
||||||
hourText.text.style,
|
hourText.text.style,
|
||||||
Typography.material2021().englishLike.displayMedium!
|
Typography.material2021().englishLike.displayLarge!
|
||||||
.merge(Typography.material2021().black.displayMedium)
|
.merge(Typography.material2021().black.displayLarge)
|
||||||
.copyWith(
|
.copyWith(
|
||||||
color: defaultTheme.colorScheme.onPrimaryContainer,
|
color: defaultTheme.colorScheme.onPrimaryContainer,
|
||||||
decorationColor: defaultTheme.colorScheme.onSurface
|
decorationColor: defaultTheme.colorScheme.onSurface,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
final RenderParagraph minuteText = _textRenderParagraph(tester, '15');
|
final RenderParagraph minuteText = _textRenderParagraph(tester, '15');
|
||||||
expect(
|
expect(
|
||||||
minuteText.text.style,
|
minuteText.text.style,
|
||||||
Typography.material2021().englishLike.displayMedium!
|
Typography.material2021().englishLike.displayLarge!
|
||||||
.merge(Typography.material2021().black.displayMedium)
|
.merge(Typography.material2021().black.displayLarge)
|
||||||
.copyWith(
|
.copyWith(
|
||||||
color: defaultTheme.colorScheme.onSurface,
|
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.tap(find.text('X'));
|
||||||
await tester.pumpAndSettle(const Duration(seconds: 1));
|
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!;
|
final InputDecoration hourDecoration = _textField(tester, '7').decoration!;
|
||||||
expect(hourDecoration.filled, true);
|
expect(hourDecoration.filled, true);
|
||||||
expect(hourDecoration.fillColor, defaultTheme.colorScheme.surfaceContainerHighest);
|
expect(hourDecoration.fillColor, defaultTheme.colorScheme.surfaceContainerHighest);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user