Skip to content

Commit 7d89617

Browse files
TahaTesserTahaTesser
authored
Fix TimePicker defaults for hourMinuteTextStyle and dayPeriodTextColor for Material 3 (flutter#131253)
fixes [`TimePicker` color and visual issues](flutter#127035) ## Description - fixes default text style for `TimePicker`s `hourMinuteTextStyle` and added a todo for flutter#131247 - fixes correct default color not being accessed for `dayPeriodTextColor` - Updates tests ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(useMaterial3: true), home: const Example(), ); } } class Example extends StatelessWidget { const Example({super.key}); @OverRide Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Sample'), ), body: Center( child: ElevatedButton( onPressed: () { showTimePicker( context: context, orientation: Orientation.portrait, initialEntryMode: TimePickerEntryMode.input, initialTime: TimeOfDay.now(), builder: (BuildContext context, Widget? child) { return MediaQuery( data: MediaQuery.of(context) .copyWith(alwaysUse24HourFormat: true), child: child!, ); }, ); }, child: const Text('Open Time Picker'), ), ), ); } } ``` </details> ### Before ![ezgif com-video-to-gif](https://github.com/flutter/flutter/assets/48603081/b791501f-aed3-44f3-8f75-70a1e28038c6) ### After ![ezgif com-video-to-gif (1)](https://github.com/flutter/flutter/assets/48603081/1bb32064-a9b1-416d-8290-7d22b0d4fdb9)
1 parent e4ce8e0 commit 7d89617

File tree

4 files changed

+52
-78
lines changed

4 files changed

+52
-78
lines changed

‎dev/tools/gen_defaults/generated/used_tokens.csv

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -737,6 +737,7 @@ md.comp.time-picker.period-selector.selected.label-text.color,
737737
md.comp.time-picker.period-selector.selected.pressed.label-text.color,
738738
md.comp.time-picker.period-selector.unselected.focus.label-text.color,
739739
md.comp.time-picker.period-selector.unselected.hover.label-text.color,
740+
md.comp.time-picker.period-selector.unselected.label-text.color,
740741
md.comp.time-picker.period-selector.unselected.pressed.label-text.color,
741742
md.comp.time-picker.period-selector.vertical.container.height,
742743
md.comp.time-picker.period-selector.vertical.container.width,
@@ -746,7 +747,6 @@ md.comp.time-picker.time-selector.container.shape,
746747
md.comp.time-picker.time-selector.container.width,
747748
md.comp.time-picker.time-selector.focus.state-layer.opacity,
748749
md.comp.time-picker.time-selector.hover.state-layer.opacity,
749-
md.comp.time-picker.time-selector.label-text.text-style,
750750
md.comp.time-picker.time-selector.selected.container.color,
751751
md.comp.time-picker.time-selector.selected.focus.label-text.color,
752752
md.comp.time-picker.time-selector.selected.focus.state-layer.color,

‎dev/tools/gen_defaults/lib/time_picker_template.dart

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -84,44 +84,28 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
8484
@override
8585
Color get dayPeriodTextColor {
8686
return MaterialStateColor.resolveWith((Set<MaterialState> states) {
87-
return _dayPeriodForegroundColor.resolve(states);
88-
});
89-
}
90-
91-
MaterialStateProperty<Color> get _dayPeriodForegroundColor {
92-
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
93-
Color? textColor;
9487
if (states.contains(MaterialState.selected)) {
95-
if (states.contains(MaterialState.pressed)) {
96-
textColor = ${componentColor("$dayPeriodComponent.selected.pressed.label-text")};
97-
} else {
98-
// not pressed
99-
if (states.contains(MaterialState.hovered)) {
100-
textColor = ${componentColor("$dayPeriodComponent.selected.hover.label-text")};
101-
} else {
102-
// not hovered
103-
if (states.contains(MaterialState.focused)) {
104-
textColor = ${componentColor("$dayPeriodComponent.selected.focus.label-text")};
105-
}
106-
}
88+
if (states.contains(MaterialState.focused)) {
89+
return ${componentColor("$dayPeriodComponent.selected.focus.label-text")};
90+
}
91+
if (states.contains(MaterialState.hovered)) {
92+
return ${componentColor("$dayPeriodComponent.selected.hover.label-text")};
10793
}
108-
} else {
109-
// unselected
11094
if (states.contains(MaterialState.pressed)) {
111-
textColor = ${componentColor("$dayPeriodComponent.unselected.pressed.label-text")};
112-
} else {
113-
// not pressed
114-
if (states.contains(MaterialState.hovered)) {
115-
textColor = ${componentColor("$dayPeriodComponent.unselected.hover.label-text")};
116-
} else {
117-
// not hovered
118-
if (states.contains(MaterialState.focused)) {
119-
textColor = ${componentColor("$dayPeriodComponent.unselected.focus.label-text")};
120-
}
121-
}
95+
return ${componentColor("$dayPeriodComponent.selected.pressed.label-text")};
12296
}
97+
return ${componentColor("$dayPeriodComponent.selected.label-text")};
98+
}
99+
if (states.contains(MaterialState.focused)) {
100+
return ${componentColor("$dayPeriodComponent.unselected.focus.label-text")};
101+
}
102+
if (states.contains(MaterialState.hovered)) {
103+
return ${componentColor("$dayPeriodComponent.unselected.hover.label-text")};
104+
}
105+
if (states.contains(MaterialState.pressed)) {
106+
return ${componentColor("$dayPeriodComponent.unselected.pressed.label-text")};
123107
}
124-
return textColor ?? ${componentColor("$dayPeriodComponent.selected.label-text")};
108+
return ${componentColor("$dayPeriodComponent.unselected.label-text")};
125109
});
126110
}
127111
@@ -297,7 +281,10 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
297281
@override
298282
TextStyle get hourMinuteTextStyle {
299283
return MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
300-
return ${textStyle('$hourMinuteComponent.label-text')}!.copyWith(color: _hourMinuteTextColor.resolve(states));
284+
// TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/127035 is fixed.
285+
// This is using the correct text style from Material 3 spec.
286+
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
287+
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
301288
});
302289
}
303290

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

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3393,44 +3393,28 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
33933393
@override
33943394
Color get dayPeriodTextColor {
33953395
return MaterialStateColor.resolveWith((Set<MaterialState> states) {
3396-
return _dayPeriodForegroundColor.resolve(states);
3397-
});
3398-
}
3399-
3400-
MaterialStateProperty<Color> get _dayPeriodForegroundColor {
3401-
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
3402-
Color? textColor;
34033396
if (states.contains(MaterialState.selected)) {
3404-
if (states.contains(MaterialState.pressed)) {
3405-
textColor = _colors.onTertiaryContainer;
3406-
} else {
3407-
// not pressed
3408-
if (states.contains(MaterialState.hovered)) {
3409-
textColor = _colors.onTertiaryContainer;
3410-
} else {
3411-
// not hovered
3412-
if (states.contains(MaterialState.focused)) {
3413-
textColor = _colors.onTertiaryContainer;
3414-
}
3415-
}
3397+
if (states.contains(MaterialState.focused)) {
3398+
return _colors.onTertiaryContainer;
3399+
}
3400+
if (states.contains(MaterialState.hovered)) {
3401+
return _colors.onTertiaryContainer;
34163402
}
3417-
} else {
3418-
// unselected
34193403
if (states.contains(MaterialState.pressed)) {
3420-
textColor = _colors.onSurfaceVariant;
3421-
} else {
3422-
// not pressed
3423-
if (states.contains(MaterialState.hovered)) {
3424-
textColor = _colors.onSurfaceVariant;
3425-
} else {
3426-
// not hovered
3427-
if (states.contains(MaterialState.focused)) {
3428-
textColor = _colors.onSurfaceVariant;
3429-
}
3430-
}
3404+
return _colors.onTertiaryContainer;
34313405
}
3406+
return _colors.onTertiaryContainer;
3407+
}
3408+
if (states.contains(MaterialState.focused)) {
3409+
return _colors.onSurfaceVariant;
3410+
}
3411+
if (states.contains(MaterialState.hovered)) {
3412+
return _colors.onSurfaceVariant;
3413+
}
3414+
if (states.contains(MaterialState.pressed)) {
3415+
return _colors.onSurfaceVariant;
34323416
}
3433-
return textColor ?? _colors.onTertiaryContainer;
3417+
return _colors.onSurfaceVariant;
34343418
});
34353419
}
34363420

@@ -3606,7 +3590,10 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
36063590
@override
36073591
TextStyle get hourMinuteTextStyle {
36083592
return MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
3609-
return _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states));
3593+
// TODO(tahatesser): Update this when https://github.com/flutter/flutter/issues/127035 is fixed.
3594+
// This is using the correct text style from Material 3 spec.
3595+
// https://m3.material.io/components/time-pickers/specs#fd0b6939-edab-4058-82e1-93d163945215
3596+
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
36103597
});
36113598
}
36123599

‎packages/flutter/test/material/time_picker_theme_test.dart

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -249,8 +249,8 @@ void main() {
249249
final RenderParagraph hourText = _textRenderParagraph(tester, '7');
250250
expect(
251251
hourText.text.style,
252-
Typography.material2021().englishLike.displayLarge!
253-
.merge(Typography.material2021().black.displayLarge)
252+
Typography.material2021().englishLike.displayMedium!
253+
.merge(Typography.material2021().black.displayMedium)
254254
.copyWith(
255255
color: defaultTheme.colorScheme.onPrimaryContainer,
256256
decorationColor: defaultTheme.colorScheme.onSurface
@@ -260,8 +260,8 @@ void main() {
260260
final RenderParagraph minuteText = _textRenderParagraph(tester, '15');
261261
expect(
262262
minuteText.text.style,
263-
Typography.material2021().englishLike.displayLarge!
264-
.merge(Typography.material2021().black.displayLarge)
263+
Typography.material2021().englishLike.displayMedium!
264+
.merge(Typography.material2021().black.displayMedium)
265265
.copyWith(
266266
color: defaultTheme.colorScheme.onSurface,
267267
decorationColor: defaultTheme.colorScheme.onSurface
@@ -275,7 +275,7 @@ void main() {
275275
.merge(Typography.material2021().black.titleMedium)
276276
.copyWith(
277277
color: defaultTheme.colorScheme.onTertiaryContainer,
278-
decorationColor: defaultTheme.colorScheme.onSurface
278+
decorationColor: defaultTheme.colorScheme.onSurface,
279279
),
280280
);
281281

@@ -285,8 +285,8 @@ void main() {
285285
Typography.material2021().englishLike.titleMedium!
286286
.merge(Typography.material2021().black.titleMedium)
287287
.copyWith(
288-
color: defaultTheme.colorScheme.onTertiaryContainer,
289-
decorationColor: defaultTheme.colorScheme.onSurface
288+
color: defaultTheme.colorScheme.onSurfaceVariant,
289+
decorationColor: defaultTheme.colorScheme.onSurface,
290290
)
291291
);
292292

@@ -297,7 +297,7 @@ void main() {
297297
.merge(Typography.material2021().black.bodyMedium)
298298
.copyWith(
299299
color: defaultTheme.colorScheme.onSurface,
300-
decorationColor: defaultTheme.colorScheme.onSurface
300+
decorationColor: defaultTheme.colorScheme.onSurface,
301301
),
302302
);
303303

@@ -312,7 +312,7 @@ void main() {
312312
.merge(Typography.material2021().black.bodyLarge)
313313
.copyWith(
314314
color: defaultTheme.colorScheme.onSurface,
315-
decorationColor: defaultTheme.colorScheme.onSurface
315+
decorationColor: defaultTheme.colorScheme.onSurface,
316316
),
317317
);
318318
// ignore: avoid_dynamic_calls

0 commit comments

Comments
 (0)