Skip to content

F
Front-End
Unverified Commit 7d8d0863 authored by rami-a's avatar rami-a Committed by GitHub
Browse files
Options

Add property to theme dial label colors (#60383)

parent e1538d1b
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 14 deletions
packages/flutter/lib/src/material/time_picker.dart
View file @ 7d8d0863
......@@ -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
View file @ 7d8d0863
......@@ -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
View file @ 7d8d0863
......@@ -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),
......@@ -425,4 +459,9 @@ IconButton _entryModeIconButton(WidgetTester tester) {
RenderParagraph _textRenderParagraph(WidgetTester tester, String text) {
return tester.element<StatelessElement>(find.text(text).first).renderObject as RenderParagraph;
}
\ No newline at end of file
}
final Finder findDialPaint = find.descendant(
of: find.byWidgetPredicate((Widget w) => '${w.runtimeType}' == '_Dial'),
matching: find.byWidgetPredicate((Widget w) => w is CustomPaint),
);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab