Unverified Commit fe32675b authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

Add M3 date picker tests and fix divider (#127197)

partial fix https://github.com/flutter/flutter/issues/126826 (date range picker is another PR)
fixes https://github.com/flutter/flutter/issues/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)
parent d9045f02
......@@ -675,7 +675,7 @@ class _DatePickerDialogState extends State<DatePickerDialog> with RestorationMix
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
header,
if (useMaterial3) const Divider(),
if (useMaterial3) Divider(height: 0, color: datePickerTheme.dividerColor),
Expanded(child: picker),
actions,
],
......@@ -686,7 +686,7 @@ class _DatePickerDialogState extends State<DatePickerDialog> with RestorationMix
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
header,
if (useMaterial3) const VerticalDivider(),
if (useMaterial3) VerticalDivider(width: 0, color: datePickerTheme.dividerColor),
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
......@@ -850,6 +850,7 @@ class _DatePickerHeader extends StatelessWidget {
padding: const EdgeInsetsDirectional.only(
start: 24,
end: 12,
bottom: 12,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
......
......@@ -67,6 +67,7 @@ class DatePickerThemeData with Diagnosticable {
this.rangePickerHeaderHelpStyle,
this.rangeSelectionBackgroundColor,
this.rangeSelectionOverlayColor,
this.dividerColor,
});
/// Overrides the default value of [Dialog.backgroundColor].
......@@ -282,6 +283,11 @@ class DatePickerThemeData with Diagnosticable {
/// [DateRangePickerDialog] is focused, hovered, or pressed.
final MaterialStateProperty<Color?>? rangeSelectionOverlayColor;
/// Overrides the default color used to paint the horizontal divider
/// below the header text when dialog is in in portrait orientation
/// and vertical divider when the dialog is in landscape orientation.
final Color? dividerColor;
/// Creates a copy of this object with the given fields replaced with the
/// new values.
DatePickerThemeData copyWith({
......@@ -317,6 +323,7 @@ class DatePickerThemeData with Diagnosticable {
TextStyle? rangePickerHeaderHelpStyle,
Color? rangeSelectionBackgroundColor,
MaterialStateProperty<Color?>? rangeSelectionOverlayColor,
Color? dividerColor,
}) {
return DatePickerThemeData(
backgroundColor: backgroundColor ?? this.backgroundColor,
......@@ -351,6 +358,7 @@ class DatePickerThemeData with Diagnosticable {
rangePickerHeaderHelpStyle: rangePickerHeaderHelpStyle ?? this.rangePickerHeaderHelpStyle,
rangeSelectionBackgroundColor: rangeSelectionBackgroundColor ?? this.rangeSelectionBackgroundColor,
rangeSelectionOverlayColor: rangeSelectionOverlayColor ?? this.rangeSelectionOverlayColor,
dividerColor: dividerColor ?? this.dividerColor,
);
}
......@@ -392,6 +400,7 @@ class DatePickerThemeData with Diagnosticable {
rangePickerHeaderHelpStyle: TextStyle.lerp(a?.rangePickerHeaderHelpStyle, b?.rangePickerHeaderHelpStyle, t),
rangeSelectionBackgroundColor: Color.lerp(a?.rangeSelectionBackgroundColor, b?.rangeSelectionBackgroundColor, t),
rangeSelectionOverlayColor: MaterialStateProperty.lerp<Color?>(a?.rangeSelectionOverlayColor, b?.rangeSelectionOverlayColor, t, Color.lerp),
dividerColor: Color.lerp(a?.dividerColor, b?.dividerColor, t),
);
}
......@@ -439,6 +448,7 @@ class DatePickerThemeData with Diagnosticable {
rangePickerHeaderHelpStyle,
rangeSelectionBackgroundColor,
rangeSelectionOverlayColor,
dividerColor,
]);
@override
......@@ -478,7 +488,8 @@ class DatePickerThemeData with Diagnosticable {
&& other.rangePickerHeaderHeadlineStyle == rangePickerHeaderHeadlineStyle
&& other.rangePickerHeaderHelpStyle == rangePickerHeaderHelpStyle
&& other.rangeSelectionBackgroundColor == rangeSelectionBackgroundColor
&& other.rangeSelectionOverlayColor == rangeSelectionOverlayColor;
&& other.rangeSelectionOverlayColor == rangeSelectionOverlayColor
&& other.dividerColor == dividerColor;
}
@override
......@@ -516,6 +527,7 @@ class DatePickerThemeData with Diagnosticable {
properties.add(DiagnosticsProperty<TextStyle>('rangePickerHeaderHelpStyle', rangePickerHeaderHelpStyle, defaultValue: null));
properties.add(ColorProperty('rangeSelectionBackgroundColor', rangeSelectionBackgroundColor, defaultValue: null));
properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('rangeSelectionOverlayColor', rangeSelectionOverlayColor, defaultValue: null));
properties.add(ColorProperty('dividerColor', dividerColor, defaultValue: null));
}
}
......
......@@ -40,6 +40,7 @@ void main() {
rangePickerHeaderHelpStyle: TextStyle(fontSize: 15),
rangeSelectionBackgroundColor: Color(0xffffff2f),
rangeSelectionOverlayColor: MaterialStatePropertyAll<Color>(Color(0xffffff3f)),
dividerColor: Color(0xffffff3f),
);
Material findDialogMaterial(WidgetTester tester) {
......@@ -70,6 +71,9 @@ void main() {
return container.decoration as BoxDecoration?;
}
const Size wideWindowSize = Size(1920.0, 1080.0);
const Size narrowWindowSize = Size(1070.0, 1770.0);
test('DatePickerThemeData copyWith, ==, hashCode basics', () {
expect(const DatePickerThemeData(), const DatePickerThemeData().copyWith());
expect(const DatePickerThemeData().hashCode, const DatePickerThemeData().copyWith().hashCode);
......@@ -114,6 +118,7 @@ void main() {
expect(theme.rangePickerHeaderHelpStyle, null);
expect(theme.rangeSelectionBackgroundColor, null);
expect(theme.rangeSelectionOverlayColor, null);
expect(theme.dividerColor, null);
});
testWidgets('DatePickerTheme.defaults M3 defaults', (WidgetTester tester) async {
......@@ -187,9 +192,9 @@ void main() {
expect(m3.rangePickerHeaderForegroundColor, colorScheme.onSurfaceVariant);
expect(m3.rangePickerHeaderHeadlineStyle, textTheme.titleLarge);
expect(m3.rangePickerHeaderHelpStyle, textTheme.titleSmall);
expect(m3.dividerColor, null);
});
testWidgets('DatePickerTheme.defaults M2 defaults', (WidgetTester tester) async {
late final DatePickerThemeData m2; // M2 defaults
late final ThemeData theme;
......@@ -310,6 +315,7 @@ void main() {
'rangePickerHeaderHelpStyle: TextStyle(inherit: true, size: 15.0)',
'rangeSelectionBackgroundColor: Color(0xffffff2f)',
'rangeSelectionOverlayColor: MaterialStatePropertyAll(Color(0xffffff3f))',
'dividerColor: Color(0xffffff3f)',
]);
});
......@@ -392,7 +398,6 @@ void main() {
expect(year2023Decoration.border?.bottom.color, datePickerTheme.todayForegroundColor?.resolve(<MaterialState>{}));
});
testWidgets('DateRangePickerDialog uses ThemeData datePicker theme', (WidgetTester tester) async {
await tester.pumpWidget(
MaterialApp(
......@@ -434,4 +439,44 @@ void main() {
expect(selectedDate.style?.color, datePickerTheme.rangePickerHeaderForegroundColor);
expect(selectedDate.style?.fontSize, datePickerTheme.rangePickerHeaderHeadlineStyle?.fontSize);
});
testWidgets('Dividers use DatePickerThemeData.dividerColor', (WidgetTester tester) async {
Future<void> showPicker(WidgetTester tester, Size size) async {
tester.view.physicalSize = size;
tester.view.devicePixelRatio = 1.0;
addTearDown(tester.view.reset);
await tester.pumpWidget(
MaterialApp(
theme: ThemeData.light(useMaterial3: true).copyWith(
datePickerTheme: datePickerTheme,
),
home: Directionality(
textDirection: TextDirection.ltr,
child: Material(
child: Center(
child: DatePickerDialog(
initialDate: DateTime(2023, DateTime.january, 25),
firstDate: DateTime(2022),
lastDate: DateTime(2024, DateTime.december, 31),
currentDate: DateTime(2023, DateTime.january, 24),
),
),
),
),
),
);
}
await showPicker(tester, wideWindowSize);
// Test vertical divider.
final VerticalDivider verticalDivider = tester.widget(find.byType(VerticalDivider));
expect(verticalDivider.color, datePickerTheme.dividerColor);
// Test portrait layout.
await showPicker(tester, narrowWindowSize);
// Test horizontal divider.
final Divider horizontalDivider = tester.widget(find.byType(Divider));
expect(horizontalDivider.color, datePickerTheme.dividerColor);
});
}
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