Add property to theme dial label colors (#60383)

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

@@ -1127,8 +1127,8 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
     TimeOfDay(hour: 22, minute: 0),
   ];
 
-  _TappableLabel _buildTappableLabel(TextTheme textTheme, int value, String label, VoidCallback onTap) {
-    final TextStyle style = textTheme.subtitle1;
+  _TappableLabel _buildTappableLabel(TextTheme textTheme, Color color, int value, String label, VoidCallback onTap) {
+    final TextStyle style = textTheme.subtitle1.copyWith(color: color);
     final double labelScaleFactor = math.min(MediaQuery.of(context).textScaleFactor, 2.0);
     return _TappableLabel(
       value: value,
@@ -1141,10 +1141,11 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
     );
   }
 
-  List<_TappableLabel> _build24HourRing(TextTheme textTheme) => <_TappableLabel>[
+  List<_TappableLabel> _build24HourRing(TextTheme textTheme, Color color) => <_TappableLabel>[
     for (final TimeOfDay timeOfDay in _twentyFourHours)
       _buildTappableLabel(
         textTheme,
+        color,
         timeOfDay.hour,
         localizations.formatHour(timeOfDay, alwaysUse24HourFormat: media.alwaysUse24HourFormat),
         () {
@@ -1153,10 +1154,11 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
       ),
   ];
 
-  List<_TappableLabel> _build12HourRing(TextTheme textTheme) => <_TappableLabel>[
+  List<_TappableLabel> _build12HourRing(TextTheme textTheme, Color color) => <_TappableLabel>[
     for (final TimeOfDay timeOfDay in _amHours)
       _buildTappableLabel(
         textTheme,
+        color,
         timeOfDay.hour,
         localizations.formatHour(timeOfDay, alwaysUse24HourFormat: media.alwaysUse24HourFormat),
         () {
@@ -1165,7 +1167,7 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
       ),
   ];
 
-  List<_TappableLabel> _buildMinutes(TextTheme textTheme) {
+  List<_TappableLabel> _buildMinutes(TextTheme textTheme, Color color) {
     const List<TimeOfDay> _minuteMarkerValues = <TimeOfDay>[
       TimeOfDay(hour: 0, minute: 0),
       TimeOfDay(hour: 0, minute: 5),
@@ -1185,6 +1187,7 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
       for (final TimeOfDay timeOfDay in _minuteMarkerValues)
         _buildTappableLabel(
           textTheme,
+          color,
           timeOfDay.minute,
           localizations.formatMinute(timeOfDay),
           () {
@@ -1200,6 +1203,8 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
     final TimePickerThemeData pickerTheme = TimePickerTheme.of(context);
     final Color backgroundColor = pickerTheme.dialBackgroundColor ?? themeData.colorScheme.onBackground.withOpacity(0.12);
     final Color accentColor = pickerTheme.dialHandColor ?? themeData.colorScheme.primary;
+    final Color primaryLabelColor = MaterialStateProperty.resolveAs(pickerTheme.dialTextColor, <MaterialState>{});
+    final Color secondaryLabelColor = MaterialStateProperty.resolveAs(pickerTheme.dialTextColor, <MaterialState>{MaterialState.selected});
     List<_TappableLabel> primaryLabels;
     List<_TappableLabel> secondaryLabels;
     int selectedDialValue;
@@ -1207,18 +1212,18 @@ class _DialState extends State<_Dial> with SingleTickerProviderStateMixin {
       case _TimePickerMode.hour:
         if (widget.use24HourDials) {
           selectedDialValue = widget.selectedTime.hour;
-          primaryLabels = _build24HourRing(theme.textTheme);
-          secondaryLabels = _build24HourRing(theme.accentTextTheme);
+          primaryLabels = _build24HourRing(theme.textTheme, primaryLabelColor);
+          secondaryLabels = _build24HourRing(theme.accentTextTheme, secondaryLabelColor);
         } else {
           selectedDialValue = widget.selectedTime.hourOfPeriod;
-          primaryLabels = _build12HourRing(theme.textTheme);
-          secondaryLabels = _build12HourRing(theme.accentTextTheme);
+          primaryLabels = _build12HourRing(theme.textTheme, primaryLabelColor);
+          secondaryLabels = _build12HourRing(theme.accentTextTheme, secondaryLabelColor);
         }
         break;
       case _TimePickerMode.minute:
         selectedDialValue = widget.selectedTime.minute;
-        primaryLabels = _buildMinutes(theme.textTheme);
-        secondaryLabels = _buildMinutes(theme.accentTextTheme);
+        primaryLabels = _buildMinutes(theme.textTheme, primaryLabelColor);
+        secondaryLabels = _buildMinutes(theme.accentTextTheme, secondaryLabelColor);
         break;
     }
 

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

@@ -41,6 +41,7 @@ class TimePickerThemeData with Diagnosticable {
     this.dayPeriodColor,
     this.dialHandColor,
     this.dialBackgroundColor,
+    this.dialTextColor,
     this.entryModeIconColor,
     this.hourMinuteTextStyle,
     this.dayPeriodTextStyle,
@@ -121,6 +122,16 @@ class TimePickerThemeData with Diagnosticable {
   /// [ColorScheme.primary].
   final Color dialBackgroundColor;
 
+  /// The color of the dial text that represents specific hours and minutes.
+  ///
+  /// If [dialTextColor] is a [MaterialStateColor], then the effective
+  /// text color can depend on the [MaterialState.selected] state, i.e. if the
+  /// text is selected or not.
+  ///
+  /// By default the overall theme's `textTheme` color is used when the text is
+  /// selected and `accentTextTheme` color is used when it's not selected.
+  final Color dialTextColor;
+
   /// The color of the entry mode [IconButton].
   ///
   /// If this is null, the time picker defaults to
@@ -199,6 +210,7 @@ class TimePickerThemeData with Diagnosticable {
     Color dayPeriodColor,
     Color dialHandColor,
     Color dialBackgroundColor,
+    Color dialTextColor,
     Color entryModeIconColor,
     TextStyle hourMinuteTextStyle,
     TextStyle dayPeriodTextStyle,
@@ -217,6 +229,7 @@ class TimePickerThemeData with Diagnosticable {
       dayPeriodColor: dayPeriodColor ?? this.dayPeriodColor,
       dialHandColor: dialHandColor ?? this.dialHandColor,
       dialBackgroundColor: dialBackgroundColor ?? this.dialBackgroundColor,
+      dialTextColor: dialTextColor ?? this.dialTextColor,
       entryModeIconColor: entryModeIconColor ?? this.entryModeIconColor,
       hourMinuteTextStyle: hourMinuteTextStyle ?? this.hourMinuteTextStyle,
       dayPeriodTextStyle: dayPeriodTextStyle ?? this.dayPeriodTextStyle,
@@ -256,6 +269,7 @@ class TimePickerThemeData with Diagnosticable {
       dayPeriodColor: Color.lerp(a?.dayPeriodColor, b?.dayPeriodColor, t),
       dialHandColor: Color.lerp(a?.dialHandColor, b?.dialHandColor, t),
       dialBackgroundColor: Color.lerp(a?.dialBackgroundColor, b?.dialBackgroundColor, t),
+      dialTextColor: Color.lerp(a?.dialTextColor, b?.dialTextColor, t),
       entryModeIconColor: Color.lerp(a?.entryModeIconColor, b?.entryModeIconColor, t),
       hourMinuteTextStyle: TextStyle.lerp(a?.hourMinuteTextStyle, b?.hourMinuteTextStyle, t),
       dayPeriodTextStyle: TextStyle.lerp(a?.dayPeriodTextStyle, b?.dayPeriodTextStyle, t),
@@ -278,6 +292,7 @@ class TimePickerThemeData with Diagnosticable {
       dayPeriodColor,
       dialHandColor,
       dialBackgroundColor,
+      dialTextColor,
       entryModeIconColor,
       hourMinuteTextStyle,
       dayPeriodTextStyle,
@@ -304,6 +319,7 @@ class TimePickerThemeData with Diagnosticable {
         && other.dayPeriodColor == dayPeriodColor
         && other.dialHandColor == dialHandColor
         && other.dialBackgroundColor == dialBackgroundColor
+        && other.dialTextColor == dialTextColor
         && other.entryModeIconColor == entryModeIconColor
         && other.hourMinuteTextStyle == hourMinuteTextStyle
         && other.dayPeriodTextStyle == dayPeriodTextStyle
@@ -325,6 +341,7 @@ class TimePickerThemeData with Diagnosticable {
     properties.add(ColorProperty('dayPeriodColor', dayPeriodColor, defaultValue: null));
     properties.add(ColorProperty('dialHandColor', dialHandColor, defaultValue: null));
     properties.add(ColorProperty('dialBackgroundColor', dialBackgroundColor, defaultValue: null));
+    properties.add(ColorProperty('dialTextColor', dialTextColor, defaultValue: null));
     properties.add(ColorProperty('entryModeIconColor', entryModeIconColor, defaultValue: null));
     properties.add(DiagnosticsProperty<TextStyle>('hourMinuteTextStyle', hourMinuteTextStyle, defaultValue: null));
     properties.add(DiagnosticsProperty<TextStyle>('dayPeriodTextStyle', dayPeriodTextStyle, defaultValue: null));

packages/flutter/test/material/time_picker_theme_test.dart

@@ -26,8 +26,7 @@ void main() {
     expect(timePickerTheme.dayPeriodColor, null);
     expect(timePickerTheme.dialHandColor, null);
     expect(timePickerTheme.dialBackgroundColor, null);
-    expect(timePickerTheme.dialHandColor, null);
-    expect(timePickerTheme.dialBackgroundColor, null);
+    expect(timePickerTheme.dialTextColor, null);
     expect(timePickerTheme.entryModeIconColor, null);
     expect(timePickerTheme.hourMinuteTextStyle, null);
     expect(timePickerTheme.dayPeriodTextStyle, null);
@@ -61,6 +60,7 @@ void main() {
       dayPeriodColor: Color(0xFFFFFFFF),
       dialHandColor: Color(0xFFFFFFFF),
       dialBackgroundColor: Color(0xFFFFFFFF),
+      dialTextColor: Color(0xFFFFFFFF),
       entryModeIconColor: Color(0xFFFFFFFF),
       hourMinuteTextStyle: TextStyle(),
       dayPeriodTextStyle: TextStyle(),
@@ -84,6 +84,7 @@ void main() {
       'dayPeriodColor: Color(0xffffffff)',
       'dialHandColor: Color(0xffffffff)',
       'dialBackgroundColor: Color(0xffffffff)',
+      'dialTextColor: Color(0xffffffff)',
       'entryModeIconColor: Color(0xffffffff)',
       'hourMinuteTextStyle: TextStyle(<all styles inherited>)',
       'dayPeriodTextStyle: TextStyle(<all styles inherited>)',
@@ -152,6 +153,21 @@ void main() {
           .merge(Typography.material2014().black.overline),
     );
 
+    final CustomPaint dialPaint = tester.widget(findDialPaint);
+    final dynamic dialPainter = dialPaint.painter;
+    final List<dynamic> primaryLabels = dialPainter.primaryLabels as List<dynamic>;
+    expect(
+      primaryLabels.first.painter.text.style,
+      Typography.material2014().englishLike.subhead
+        .merge(Typography.material2014().black.subhead),
+    );
+    final List<dynamic> secondaryLabels = dialPainter.secondaryLabels as List<dynamic>;
+    expect(
+      secondaryLabels.first.painter.text.style,
+      Typography.material2014().englishLike.subhead
+          .merge(Typography.material2014().white.subhead),
+    );
+
     final Material hourMaterial = _textMaterial(tester, '7');
     expect(hourMaterial.color, defaultTheme.colorScheme.primary.withOpacity(0.12));
     expect(hourMaterial.shape, const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0))));
@@ -276,6 +292,23 @@ void main() {
           .merge(timePickerTheme.helpTextStyle),
     );
 
+    final CustomPaint dialPaint = tester.widget(findDialPaint);
+    final dynamic dialPainter = dialPaint.painter;
+    final List<dynamic> primaryLabels = dialPainter.primaryLabels as List<dynamic>;
+    expect(
+      primaryLabels.first.painter.text.style,
+      Typography.material2014().englishLike.subhead
+          .merge(Typography.material2014().black.subhead)
+          .copyWith(color: _unselectedColor),
+    );
+    final List<dynamic> secondaryLabels = dialPainter.secondaryLabels as List<dynamic>;
+    expect(
+      secondaryLabels.first.painter.text.style,
+      Typography.material2014().englishLike.subhead
+          .merge(Typography.material2014().white.subhead)
+          .copyWith(color: _selectedColor),
+    );
+
     final Material hourMaterial = _textMaterial(tester, '7');
     expect(hourMaterial.color, _selectedColor);
     expect(hourMaterial.shape, timePickerTheme.hourMinuteShape);
@@ -343,6 +376,7 @@ TimePickerThemeData _timePickerTheme() {
     dayPeriodColor: materialStateColor,
     dialHandColor: Colors.brown,
     dialBackgroundColor: Colors.pinkAccent,
+    dialTextColor: materialStateColor,
     entryModeIconColor: Colors.red,
     hourMinuteTextStyle: const TextStyle(fontSize: 8.0),
     dayPeriodTextStyle: const TextStyle(fontSize: 8.0),
@@ -426,3 +460,8 @@ IconButton _entryModeIconButton(WidgetTester tester) {
 RenderParagraph _textRenderParagraph(WidgetTester tester, String text) {
   return tester.element<StatelessElement>(find.text(text).first).renderObject as RenderParagraph;
 }
+
+final Finder findDialPaint = find.descendant(
+  of: find.byWidgetPredicate((Widget w) => '${w.runtimeType}' == '_Dial'),
+  matching: find.byWidgetPredicate((Widget w) => w is CustomPaint),
+);