From 9a2d94ed8ce8d8d7706213c59eb8b8b11ed7f18e Mon Sep 17 00:00:00 2001 From: Taha Tesser Date: Fri, 26 Apr 2024 07:18:24 +0300 Subject: [PATCH] Fix `DateRangePickerDialog` does not use `rangePickerHeaderBackgroundColor` from `DatePickerTheme` in M2 (#147370) fixes [DatePickerThemeData's `rangePickerHeaderBackgroundColor` not being applied to DateRangePickerDialog on M2](https://github.com/flutter/flutter/issues/147301) ### Code sample
expand to view the code sample ```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( debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: false, datePickerTheme: const DatePickerThemeData( rangePickerHeaderBackgroundColor: Colors.red, ), ), home: Scaffold( body: Center( child: Builder(builder: (BuildContext context) { return ElevatedButton( onPressed: () { showDateRangePicker( context: context, currentDate: DateTime.now(), initialDateRange: DateTimeRange( start: DateTime.now(), end: DateTime.now().add(const Duration(days: 7)), ), firstDate: DateTime(2000), lastDate: DateTime(2025), ); }, child: const Text('Show Date Range Picker'), ); }), ), ), ); } } ```
### When using `rangePickerHeaderBackgroundColor` in `DatePickerTheme` for M2 ```dart theme: ThemeData( useMaterial3: false, datePickerTheme: const DatePickerThemeData( rangePickerHeaderBackgroundColor: Colors.red, ), ), ``` | Before | After | | --------------- | --------------- | | | | --- .../flutter/lib/src/material/date_picker.dart | 2 +- .../test/material/date_picker_theme_test.dart | 63 ++++++++++++++++++- .../test/material/date_range_picker_test.dart | 2 +- 3 files changed, 64 insertions(+), 3 deletions(-) diff --git a/packages/flutter/lib/src/material/date_picker.dart b/packages/flutter/lib/src/material/date_picker.dart index f4f832f6f6..890ae8d747 100644 --- a/packages/flutter/lib/src/material/date_picker.dart +++ b/packages/flutter/lib/src/material/date_picker.dart @@ -1660,7 +1660,7 @@ class _CalendarRangePickerDialog extends StatelessWidget { actionsIconTheme: iconTheme, elevation: useMaterial3 ? 0 : null, scrolledUnderElevation: useMaterial3 ? 0 : null, - backgroundColor: useMaterial3 ? headerBackground : null, + backgroundColor: headerBackground, leading: CloseButton( onPressed: onCancel, ), diff --git a/packages/flutter/test/material/date_picker_theme_test.dart b/packages/flutter/test/material/date_picker_theme_test.dart index 330f65637b..4095e7d562 100644 --- a/packages/flutter/test/material/date_picker_theme_test.dart +++ b/packages/flutter/test/material/date_picker_theme_test.dart @@ -539,7 +539,7 @@ void main() { ); final Material material = findDialogMaterial(tester); - expect(material.color, datePickerTheme.backgroundColor); //!! + expect(material.color, datePickerTheme.backgroundColor); expect(tester.widget(find.byType(Scaffold)).backgroundColor, datePickerTheme.rangePickerBackgroundColor); expect(material.elevation, datePickerTheme.rangePickerElevation); expect(material.shadowColor, datePickerTheme.rangePickerShadowColor); @@ -573,6 +573,67 @@ void main() { expect(inkFeatures, paints..circle(color: datePickerTheme.rangeSelectionOverlayColor?.resolve({}))); }); + testWidgets('Material2 - DateRangePickerDialog uses ThemeData datePicker theme', (WidgetTester tester) async { + await tester.pumpWidget( + MaterialApp( + theme: ThemeData( + datePickerTheme: datePickerTheme, + useMaterial3: false, + ), + home: Directionality( + textDirection: TextDirection.ltr, + child: Material( + child: Center( + child: DateRangePickerDialog( + firstDate: DateTime(2023), + lastDate: DateTime(2023, DateTime.january, 31), + initialDateRange: DateTimeRange( + start: DateTime(2023, DateTime.january, 17), + end: DateTime(2023, DateTime.january, 20), + ), + currentDate: DateTime(2023, DateTime.january, 23), + ), + ), + ), + ), + ), + ); + + final Material material = findDialogMaterial(tester); + expect(material.color, datePickerTheme.backgroundColor); + expect(tester.widget(find.byType(Scaffold)).backgroundColor, datePickerTheme.rangePickerBackgroundColor); + expect(material.elevation, datePickerTheme.rangePickerElevation); + expect(material.shadowColor, datePickerTheme.rangePickerShadowColor); + expect(material.surfaceTintColor, datePickerTheme.rangePickerSurfaceTintColor); + expect(material.shape, datePickerTheme.rangePickerShape); + + final AppBar appBar = tester.widget(find.byType(AppBar)); + expect(appBar.backgroundColor, datePickerTheme.rangePickerHeaderBackgroundColor); + + final Text selectRange = tester.widget(find.text('SELECT RANGE')); + expect(selectRange.style?.color, datePickerTheme.rangePickerHeaderForegroundColor); + expect(selectRange.style?.fontSize, datePickerTheme.rangePickerHeaderHelpStyle?.fontSize); + + final Text selectedDate = tester.widget(find.text('Jan 17')); + expect(selectedDate.style?.color, datePickerTheme.rangePickerHeaderForegroundColor); + expect(selectedDate.style?.fontSize, datePickerTheme.rangePickerHeaderHeadlineStyle?.fontSize); + + // Test the day overlay color. + final RenderObject inkFeatures = tester.allRenderObjects.firstWhere((RenderObject object) => object.runtimeType.toString() == '_RenderInkFeatures'); + final TestGesture gesture = await tester.createGesture( + kind: PointerDeviceKind.mouse, + ); + await gesture.addPointer(); + await gesture.moveTo(tester.getCenter(find.text('16'))); + await tester.pumpAndSettle(); + expect(inkFeatures, paints..circle(color: datePickerTheme.dayOverlayColor?.resolve({}))); + + // Test the range selection overlay color. + await gesture.moveTo(tester.getCenter(find.text('18'))); + await tester.pumpAndSettle(); + expect(inkFeatures, paints..circle(color: datePickerTheme.rangeSelectionOverlayColor?.resolve({}))); + }); + testWidgets('Dividers use DatePickerThemeData.dividerColor', (WidgetTester tester) async { Future showPicker(WidgetTester tester, Size size) async { tester.view.physicalSize = size; diff --git a/packages/flutter/test/material/date_range_picker_test.dart b/packages/flutter/test/material/date_range_picker_test.dart index 1fcc7aa8e6..0a62808319 100644 --- a/packages/flutter/test/material/date_range_picker_test.dart +++ b/packages/flutter/test/material/date_range_picker_test.dart @@ -1576,7 +1576,7 @@ void main() { expect(appBar.actionsIconTheme, iconTheme); expect(appBar.elevation, null); expect(appBar.scrolledUnderElevation, null); - expect(appBar.backgroundColor, null); + expect(appBar.backgroundColor, theme.colorScheme.primary); }); });