Skip to content

Commit

Permalink
Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle…
Browse files Browse the repository at this point in the history 
… for Material 3 Time Picker (flutter#143739)

fixes [`Time selector separator` in TimePicker is not centered vertically](flutter#143691)

Separator currently `hourMinuteTextStyle` to style itself.

This introduces `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` from Material 3 specs to correctly style  the separator. This also adds ability to change separator color without changing `hourMinuteTextColor`.

### Specs for the time selector separator
https://m3.material.io/components/time-pickers/specs
![image](https://github.com/flutter/flutter/assets/48603081/0c84f649-545d-441b-adbf-2b9ec872b14c)

### Code sample

<details>
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @OverRide
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // timePickerTheme: TimePickerThemeData(
        //   hourMinuteTextColor: Colors.amber,
        // )
      ),
      home: Scaffold(
        body: Center(
          child: Builder(builder: (context) {
            return ElevatedButton(
              onPressed: () async {
                await showTimePicker(
                  context: context,
                  initialTime: TimeOfDay.now(),
                );
              },
              child: const Text('Pick Time'),
            );
          }),
        ),
      ),
    );
  }
}

```

</details>

| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/20beeba4-5cc2-49ee-bba8-1c552c0d1e44" /> | <img src="https://github.com/flutter/flutter/assets/48603081/24927187-aff7-4191-930c-bceab6a4b4c2" /> |
  • Loading branch information
@TahaTesser
TahaTesser authored Feb 21, 2024
1 parent f923375 commit 95cdebe
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 38 deletions.
14 changes: 14 additions & 0 deletions dev/tools/gen_defaults/lib/time_picker_template.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,20 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
ShapeBorder get shape {
return ${shape("$tokenGroup.container")};
}
@override
MaterialStateProperty<Color?>? get timeSelectorSeparatorColor {
// TODO(tahatesser): Update this when tokens are available.
// This is taken from https://m3.material.io/components/time-pickers/specs.
return MaterialStatePropertyAll<Color>(_colors.onSurface);
}
@override
MaterialStateProperty<TextStyle?>? get timeSelectorSeparatorTextStyle {
// TODO(tahatesser): Update this when tokens are available.
// This is taken from https://m3.material.io/components/time-pickers/specs.
return MaterialStatePropertyAll<TextStyle?>(_textTheme.displayLarge);
}
}
''';
}
38 changes: 29 additions & 9 deletions packages/flutter/lib/src/material/time_picker.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ class _TimePickerHeader extends StatelessWidget {
textDirection: TextDirection.ltr,
children: <Widget>[
const Expanded(child: _HourControl()),
_StringFragment(timeOfDayFormat: timeOfDayFormat),
_TimeSelectorSeparator(timeOfDayFormat: timeOfDayFormat),
const Expanded(child: _MinuteControl()),
],
),
Expand Down Expand Up @@ -278,7 +278,7 @@ class _TimePickerHeader extends StatelessWidget {
textDirection: TextDirection.ltr,
children: <Widget>[
const Expanded(child: _HourControl()),
_StringFragment(timeOfDayFormat: timeOfDayFormat),
_TimeSelectorSeparator(timeOfDayFormat: timeOfDayFormat),
const Expanded(child: _MinuteControl()),
],
),
Expand Down Expand Up @@ -428,12 +428,12 @@ class _HourControl extends StatelessWidget {
/// A passive fragment showing a string value.
///
/// Used to display the appropriate separator between the input fields.
class _StringFragment extends StatelessWidget {
const _StringFragment({ required this.timeOfDayFormat });
class _TimeSelectorSeparator extends StatelessWidget {
const _TimeSelectorSeparator({ required this.timeOfDayFormat });

final TimeOfDayFormat timeOfDayFormat;

String _stringFragmentValue(TimeOfDayFormat timeOfDayFormat) {
String _timeSelectorSeparatorValue(TimeOfDayFormat timeOfDayFormat) {
switch (timeOfDayFormat) {
case TimeOfDayFormat.h_colon_mm_space_a:
case TimeOfDayFormat.a_space_h_colon_mm:
Expand All @@ -455,11 +455,17 @@ class _StringFragment extends StatelessWidget {
final Set<MaterialState> states = <MaterialState>{};

final Color effectiveTextColor = MaterialStateProperty.resolveAs<Color>(
timePickerTheme.hourMinuteTextColor ?? defaultTheme.hourMinuteTextColor,
timePickerTheme.timeSelectorSeparatorColor?.resolve(states)
?? timePickerTheme.hourMinuteTextColor
?? defaultTheme.timeSelectorSeparatorColor?.resolve(states)
?? defaultTheme.hourMinuteTextColor,
states,
);
final TextStyle effectiveStyle = MaterialStateProperty.resolveAs<TextStyle>(
timePickerTheme.hourMinuteTextStyle ?? defaultTheme.hourMinuteTextStyle,
timePickerTheme.timeSelectorSeparatorTextStyle?.resolve(states)
?? timePickerTheme.hourMinuteTextStyle
?? defaultTheme.timeSelectorSeparatorTextStyle?.resolve(states)
?? defaultTheme.hourMinuteTextStyle,
states,
).copyWith(color: effectiveTextColor);

Expand All @@ -478,7 +484,7 @@ class _StringFragment extends StatelessWidget {
width: timeOfDayFormat == TimeOfDayFormat.frenchCanadian ? 36 : 24,
height: height,
child: Text(
_stringFragmentValue(timeOfDayFormat),
_timeSelectorSeparatorValue(timeOfDayFormat),
style: effectiveStyle,
textScaler: TextScaler.noScaling,
textAlign: TextAlign.center,
Expand Down Expand Up @@ -1801,7 +1807,7 @@ class _TimePickerInputState extends State<_TimePickerInput> with RestorationMixi
],
),
),
_StringFragment(timeOfDayFormat: timeOfDayFormat),
_TimeSelectorSeparator(timeOfDayFormat: timeOfDayFormat),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down Expand Up @@ -3655,6 +3661,20 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
ShapeBorder get shape {
return const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(28.0)));
}

@override
MaterialStateProperty<Color?>? get timeSelectorSeparatorColor {
// TODO(tahatesser): Update this when tokens are available.
// This is taken from https://m3.material.io/components/time-pickers/specs.
return MaterialStatePropertyAll<Color>(_colors.onSurface);
}

@override
MaterialStateProperty<TextStyle?>? get timeSelectorSeparatorTextStyle {
// TODO(tahatesser): Update this when tokens are available.
// This is taken from https://m3.material.io/components/time-pickers/specs.
return MaterialStatePropertyAll<TextStyle?>(_textTheme.displayLarge);
}
}

// END GENERATED TOKEN PROPERTIES - TimePicker
35 changes: 34 additions & 1 deletion packages/flutter/lib/src/material/time_picker_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ class TimePickerThemeData with Diagnosticable {
this.inputDecorationTheme,
this.padding,
this.shape,
this.timeSelectorSeparatorColor,
this.timeSelectorSeparatorTextStyle,
}) : _dayPeriodColor = dayPeriodColor;

/// The background color of a time picker.
Expand Down Expand Up @@ -261,6 +263,25 @@ class TimePickerThemeData with Diagnosticable {
/// `RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0)))`.
final ShapeBorder? shape;

/// The color of the time selector seperator between the hour and minute controls.
///
/// if this is null, the time picker defaults to the overall theme's
/// [ColorScheme.onSurface].
///
/// If this is null and [ThemeData.useMaterial3] is false, then defaults to the value of
/// [hourMinuteTextColor].
final MaterialStateProperty<Color?>? timeSelectorSeparatorColor;

/// Used to configure the text style for the time selector seperator between the hour
/// and minute controls.
///
/// If this is null, the time picker defaults to the overall theme's
/// [TextTheme.displayLarge].
///
/// If this is null and [ThemeData.useMaterial3] is false, then defaults to the value of
/// [hourMinuteTextStyle].
final MaterialStateProperty<TextStyle?>? timeSelectorSeparatorTextStyle;

/// Creates a copy of this object with the given fields replaced with the
/// new values.
TimePickerThemeData copyWith({
Expand All @@ -287,6 +308,8 @@ class TimePickerThemeData with Diagnosticable {
InputDecorationTheme? inputDecorationTheme,
EdgeInsetsGeometry? padding,
ShapeBorder? shape,
MaterialStateProperty<Color?>? timeSelectorSeparatorColor,
MaterialStateProperty<TextStyle?>? timeSelectorSeparatorTextStyle,
}) {
return TimePickerThemeData(
backgroundColor: backgroundColor ?? this.backgroundColor,
Expand All @@ -311,6 +334,8 @@ class TimePickerThemeData with Diagnosticable {
inputDecorationTheme: inputDecorationTheme ?? this.inputDecorationTheme,
padding: padding ?? this.padding,
shape: shape ?? this.shape,
timeSelectorSeparatorColor: timeSelectorSeparatorColor ?? this.timeSelectorSeparatorColor,
timeSelectorSeparatorTextStyle: timeSelectorSeparatorTextStyle ?? this.timeSelectorSeparatorTextStyle,
);
}

Expand Down Expand Up @@ -355,6 +380,8 @@ class TimePickerThemeData with Diagnosticable {
inputDecorationTheme: t < 0.5 ? a?.inputDecorationTheme : b?.inputDecorationTheme,
padding: EdgeInsetsGeometry.lerp(a?.padding, b?.padding, t),
shape: ShapeBorder.lerp(a?.shape, b?.shape, t),
timeSelectorSeparatorColor: MaterialStateProperty.lerp<Color?>(a?.timeSelectorSeparatorColor, b?.timeSelectorSeparatorColor, t, Color.lerp),
timeSelectorSeparatorTextStyle: MaterialStateProperty.lerp<TextStyle?>(a?.timeSelectorSeparatorTextStyle, b?.timeSelectorSeparatorTextStyle, t, TextStyle.lerp),
);
}

Expand Down Expand Up @@ -382,6 +409,8 @@ class TimePickerThemeData with Diagnosticable {
inputDecorationTheme,
padding,
shape,
timeSelectorSeparatorColor,
timeSelectorSeparatorTextStyle,
]);

@override
Expand Down Expand Up @@ -414,7 +443,9 @@ class TimePickerThemeData with Diagnosticable {
&& other.hourMinuteTextStyle == hourMinuteTextStyle
&& other.inputDecorationTheme == inputDecorationTheme
&& other.padding == padding
&& other.shape == shape;
&& other.shape == shape
&& other.timeSelectorSeparatorColor == timeSelectorSeparatorColor
&& other.timeSelectorSeparatorTextStyle == timeSelectorSeparatorTextStyle;
}

@override
Expand Down Expand Up @@ -442,6 +473,8 @@ class TimePickerThemeData with Diagnosticable {
properties.add(DiagnosticsProperty<InputDecorationTheme>('inputDecorationTheme', inputDecorationTheme, defaultValue: null));
properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('timeSelectorSeparatorColor', timeSelectorSeparatorColor, defaultValue: null));
properties.add(DiagnosticsProperty<MaterialStateProperty<TextStyle?>>('timeSelectorSeparatorTextStyle', timeSelectorSeparatorTextStyle, defaultValue: null));
}
}

Expand Down
33 changes: 30 additions & 3 deletions packages/flutter/test/material/time_picker_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1831,7 +1831,7 @@ void main() {
final double minuteFieldTop =
tester.getTopLeft(find.byWidgetPredicate((Widget w) => '${w.runtimeType}' == '_MinuteTextField')).dy;
final double separatorTop =
tester.getTopLeft(find.byWidgetPredicate((Widget w) => '${w.runtimeType}' == '_StringFragment')).dy;
tester.getTopLeft(find.byWidgetPredicate((Widget w) => '${w.runtimeType}' == '_TimeSelectorSeparator')).dy;
expect(hourFieldTop, separatorTop);
expect(minuteFieldTop, separatorTop);
});
Expand Down Expand Up @@ -1965,6 +1965,32 @@ void main() {
});
});
}

testWidgets('Material3 - Time selector separator default text style', (WidgetTester tester) async {
final ThemeData theme = ThemeData();
await startPicker(
tester,
(TimeOfDay? value) { },
theme: theme,
);

final RenderParagraph paragraph = tester.renderObject(find.text(':'));
expect(paragraph.text.style!.color, theme.colorScheme.onSurface);
expect(paragraph.text.style!.fontSize, 57.0);
});

testWidgets('Material2 - Time selector separator default text style', (WidgetTester tester) async {
final ThemeData theme = ThemeData(useMaterial3: false);
await startPicker(
tester,
(TimeOfDay? value) { },
theme: theme,
);

final RenderParagraph paragraph = tester.renderObject(find.text(':'));
expect(paragraph.text.style!.color, theme.colorScheme.onSurface);
expect(paragraph.text.style!.fontSize, 56.0);
});
}

final Finder findDialPaint = find.descendant(
Expand Down Expand Up @@ -2175,10 +2201,11 @@ Future<Offset?> startPicker(
ValueChanged<TimeOfDay?> onChanged, {
TimePickerEntryMode entryMode = TimePickerEntryMode.dial,
String? restorationId,
required MaterialType materialType,
ThemeData? theme,
MaterialType? materialType,
}) async {
await tester.pumpWidget(MaterialApp(
theme: ThemeData(useMaterial3: materialType == MaterialType.material3),
theme: theme ?? ThemeData(useMaterial3: materialType == MaterialType.material3),
restorationScopeId: 'app',
locale: const Locale('en', 'US'),
home: _TimePickerLauncher(
Expand Down
40 changes: 39 additions & 1 deletion packages/flutter/test/material/time_picker_theme_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ void main() {
expect(timePickerTheme.entryModeIconColor, null);
expect(timePickerTheme.padding, null);
expect(timePickerTheme.shape, null);
expect(timePickerTheme.timeSelectorSeparatorColor, null);
expect(timePickerTheme.timeSelectorSeparatorTextStyle, null);
});

testWidgets('Default TimePickerThemeData debugFillProperties', (WidgetTester tester) async {
Expand Down Expand Up @@ -89,6 +91,8 @@ void main() {
shape: RoundedRectangleBorder(
side: BorderSide(color: Color(0xfffffff3)),
),
timeSelectorSeparatorColor: MaterialStatePropertyAll<Color>(Color(0xfffffff4)),
timeSelectorSeparatorTextStyle: MaterialStatePropertyAll<TextStyle>(TextStyle(color: Color(0xfffffff5))),
).debugFillProperties(builder);

final List<String> description = builder.properties
Expand Down Expand Up @@ -118,7 +122,9 @@ void main() {
'hourMinuteTextStyle: TextStyle(inherit: true, color: Color(0xfffffff1))',
'inputDecorationTheme: InputDecorationTheme#ff861(labelStyle: TextStyle(inherit: true, color: Color(0xfffffff2)))',
'padding: EdgeInsets.all(1.0)',
'shape: RoundedRectangleBorder(BorderSide(color: Color(0xfffffff3)), BorderRadius.zero)'
'shape: RoundedRectangleBorder(BorderSide(color: Color(0xfffffff3)), BorderRadius.zero)',
'timeSelectorSeparatorColor: MaterialStatePropertyAll(Color(0xfffffff4))',
'timeSelectorSeparatorTextStyle: MaterialStatePropertyAll(TextStyle(inherit: true, color: Color(0xfffffff5)))'
]));
});

Expand Down Expand Up @@ -798,6 +804,38 @@ void main() {
final Material pmMaterial = _textMaterial(tester, 'PM');
expect(pmMaterial.color, Colors.blue);
});

testWidgets('Time selector separator color uses the timeSelectorSeparatorColor value', (WidgetTester tester) async {
final TimePickerThemeData timePickerTheme = _timePickerTheme().copyWith(
timeSelectorSeparatorColor: const MaterialStatePropertyAll<Color>(Color(0xff00ff00))
);
final ThemeData theme = ThemeData(timePickerTheme: timePickerTheme);
await tester.pumpWidget(_TimePickerLauncher(themeData: theme, entryMode: TimePickerEntryMode.input));
await tester.tap(find.text('X'));
await tester.pumpAndSettle(const Duration(seconds: 1));

final RenderParagraph paragraph = tester.renderObject(find.text(':'));
expect(paragraph.text.style!.color, const Color(0xff00ff00));
});

testWidgets('Time selector separator text style uses the timeSelectorSeparatorTextStyle value', (WidgetTester tester) async {
final TimePickerThemeData timePickerTheme = _timePickerTheme().copyWith(
timeSelectorSeparatorTextStyle: const MaterialStatePropertyAll<TextStyle>(
TextStyle(
fontSize: 35.0,
fontStyle: FontStyle.italic,
),
),
);
final ThemeData theme = ThemeData(timePickerTheme: timePickerTheme);
await tester.pumpWidget(_TimePickerLauncher(themeData: theme, entryMode: TimePickerEntryMode.input));
await tester.tap(find.text('X'));
await tester.pumpAndSettle(const Duration(seconds: 1));

final RenderParagraph paragraph = tester.renderObject(find.text(':'));
expect(paragraph.text.style!.fontSize, 35.0);
expect(paragraph.text.style!.fontStyle, FontStyle.italic);
});
}

final Color _selectedColor = Colors.green[100]!;
Expand Down
Loading

0 comments on commit 95cdebe

Please sign in to comment.