Skip to content

Commit fe32675

Browse files
TahaTesserTahaTesser
authored
Add M3 date picker tests and fix divider (#127197)
partial fix #126826 (date range picker is another PR) fixes #126597 ### Description 1. This PR adds a bunch of M3 date picker tests 2. Fixes divider taking more space than it should 3. Added dividerColor theme value to allow users to customise divider color just for the date pickers from date picker theme <details> <summary>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( theme: ThemeData( datePickerTheme: DatePickerThemeData( headerBackgroundColor: Colors.amber, ), useMaterial3: true, ), home: Scaffold( body: Builder(builder: (BuildContext context) { return Center( child: ElevatedButton( onPressed: () async { showDatePicker( context: context, initialDate: DateTime(2016, DateTime.january, 15), firstDate: DateTime(2001), lastDate: DateTime(2031, DateTime.december, 31), ); }, child: const Text('Show Date Picker'), ), ); }), ), ); } } ``` </details> ### Before ![Screenshot 2023-05-19 at 17 32 19](https://github.com/flutter/flutter/assets/48603081/4463de1a-fb94-4930-a6ab-8245331a8134) ### After ![Screenshot 2023-05-19 at 17 51 15](https://github.com/flutter/flutter/assets/48603081/296276f0-cf13-4a59-8542-a46da774153b)
1 parent d9045f0 commit fe32675

4 files changed

Lines changed: 408 additions & 6 deletions

File tree

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -675,7 +675,7 @@ class _DatePickerDialogState extends State<DatePickerDialog> with RestorationMix
675675
crossAxisAlignment: CrossAxisAlignment.stretch,
676676
children: <Widget>[
677677
header,
678-
if (useMaterial3) const Divider(),
678+
if (useMaterial3) Divider(height: 0, color: datePickerTheme.dividerColor),
679679
Expanded(child: picker),
680680
actions,
681681
],
@@ -686,7 +686,7 @@ class _DatePickerDialogState extends State<DatePickerDialog> with RestorationMix
686686
crossAxisAlignment: CrossAxisAlignment.stretch,
687687
children: <Widget>[
688688
header,
689-
if (useMaterial3) const VerticalDivider(),
689+
if (useMaterial3) VerticalDivider(width: 0, color: datePickerTheme.dividerColor),
690690
Flexible(
691691
child: Column(
692692
mainAxisSize: MainAxisSize.min,
@@ -850,6 +850,7 @@ class _DatePickerHeader extends StatelessWidget {
850850
padding: const EdgeInsetsDirectional.only(
851851
start: 24,
852852
end: 12,
853+
bottom: 12,
853854
),
854855
child: Column(
855856
crossAxisAlignment: CrossAxisAlignment.start,

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ class DatePickerThemeData with Diagnosticable {
6767
this.rangePickerHeaderHelpStyle,
6868
this.rangeSelectionBackgroundColor,
6969
this.rangeSelectionOverlayColor,
70+
this.dividerColor,
7071
});
7172

7273
/// Overrides the default value of [Dialog.backgroundColor].
@@ -282,6 +283,11 @@ class DatePickerThemeData with Diagnosticable {
282283
/// [DateRangePickerDialog] is focused, hovered, or pressed.
283284
final MaterialStateProperty<Color?>? rangeSelectionOverlayColor;
284285

286+
/// Overrides the default color used to paint the horizontal divider
287+
/// below the header text when dialog is in in portrait orientation
288+
/// and vertical divider when the dialog is in landscape orientation.
289+
final Color? dividerColor;
290+
285291
/// Creates a copy of this object with the given fields replaced with the
286292
/// new values.
287293
DatePickerThemeData copyWith({
@@ -317,6 +323,7 @@ class DatePickerThemeData with Diagnosticable {
317323
TextStyle? rangePickerHeaderHelpStyle,
318324
Color? rangeSelectionBackgroundColor,
319325
MaterialStateProperty<Color?>? rangeSelectionOverlayColor,
326+
Color? dividerColor,
320327
}) {
321328
return DatePickerThemeData(
322329
backgroundColor: backgroundColor ?? this.backgroundColor,
@@ -351,6 +358,7 @@ class DatePickerThemeData with Diagnosticable {
351358
rangePickerHeaderHelpStyle: rangePickerHeaderHelpStyle ?? this.rangePickerHeaderHelpStyle,
352359
rangeSelectionBackgroundColor: rangeSelectionBackgroundColor ?? this.rangeSelectionBackgroundColor,
353360
rangeSelectionOverlayColor: rangeSelectionOverlayColor ?? this.rangeSelectionOverlayColor,
361+
dividerColor: dividerColor ?? this.dividerColor,
354362
);
355363
}
356364

@@ -392,6 +400,7 @@ class DatePickerThemeData with Diagnosticable {
392400
rangePickerHeaderHelpStyle: TextStyle.lerp(a?.rangePickerHeaderHelpStyle, b?.rangePickerHeaderHelpStyle, t),
393401
rangeSelectionBackgroundColor: Color.lerp(a?.rangeSelectionBackgroundColor, b?.rangeSelectionBackgroundColor, t),
394402
rangeSelectionOverlayColor: MaterialStateProperty.lerp<Color?>(a?.rangeSelectionOverlayColor, b?.rangeSelectionOverlayColor, t, Color.lerp),
403+
dividerColor: Color.lerp(a?.dividerColor, b?.dividerColor, t),
395404
);
396405
}
397406

@@ -439,6 +448,7 @@ class DatePickerThemeData with Diagnosticable {
439448
rangePickerHeaderHelpStyle,
440449
rangeSelectionBackgroundColor,
441450
rangeSelectionOverlayColor,
451+
dividerColor,
442452
]);
443453

444454
@override
@@ -478,7 +488,8 @@ class DatePickerThemeData with Diagnosticable {
478488
&& other.rangePickerHeaderHeadlineStyle == rangePickerHeaderHeadlineStyle
479489
&& other.rangePickerHeaderHelpStyle == rangePickerHeaderHelpStyle
480490
&& other.rangeSelectionBackgroundColor == rangeSelectionBackgroundColor
481-
&& other.rangeSelectionOverlayColor == rangeSelectionOverlayColor;
491+
&& other.rangeSelectionOverlayColor == rangeSelectionOverlayColor
492+
&& other.dividerColor == dividerColor;
482493
}
483494

484495
@override
@@ -516,6 +527,7 @@ class DatePickerThemeData with Diagnosticable {
516527
properties.add(DiagnosticsProperty<TextStyle>('rangePickerHeaderHelpStyle', rangePickerHeaderHelpStyle, defaultValue: null));
517528
properties.add(ColorProperty('rangeSelectionBackgroundColor', rangeSelectionBackgroundColor, defaultValue: null));
518529
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('rangeSelectionOverlayColor', rangeSelectionOverlayColor, defaultValue: null));
530+
properties.add(ColorProperty('dividerColor', dividerColor, defaultValue: null));
519531
}
520532
}
521533

0 commit comments

Comments
 (0)