Repository navigation
DatePickerThemeData's rangePickerHeaderBackgroundColor not being applied to DateRangePickerDialog on M2 #147301
Description
Steps to reproduce
- Create an example app (or run in your current one, using Material 2)
- Set the property
rangePickerHeaderBackgroundColorin yourThemeData>datePickerThemeto whichever color you prefer (i.e. Colors.green) - Include a
DateRangePickerDialogin yourbuild(...)method or launch one viashowDateRangePicker(...)
Expected results
The header's background of the DateRangePickerDialog is set to the specified color (green, in this case).
Actual results
The header's background of the DateRangePickerDialog is set to the ThemeData's appBarTheme backgroundColor`.
Although sometimes one would like this header to have the same color, not every time it's what is wanted.
Code sample
Code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: false,
datePickerTheme: Theme.of(context).datePickerTheme.copyWith(
//headerBackgroundColor: Colors.green, // <- This works for the DatePickerDialog
rangePickerHeaderBackgroundColor: Colors.green, // <- This is NOT working for the DateRangePickerDialog
)
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: DateRangePickerDialog(
firstDate: DateTime(2000),
lastDate: DateTime(2200)
)
)
],
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.19.4, on macOS 14.2.1 23C71 darwin-arm64, locale en-US)
• Flutter version 3.19.4 on channel stable at /opt/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 68bfaea224 (5 weeks ago), 2024-03-20 15:36:31 -0700
• Engine revision a5c24f538d
• Dart version 3.3.2
• DevTools version 2.31.1
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/{redacted}/Library/Android/sdk
• Platform android-34-ext8, build-tools 34.0.0
• ANDROID_HOME = /Users/{redacted}/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15E204a
• CocoaPods version 1.13.0
[✓] Android Studio (version 2023.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] Connected device (2 available)
• {redacted}
• {redacted}
[✓] Network resources
• All expected network resources are available.
• No issues found!No difference found at 3.19.6
Metadata
Metadata
Assignees
Labels
Date or time picker widgetsFound to occur in 3.19Found to occur in 3.22flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages team
Type
Projects
- Status
Activity
huycozy commentedon Apr 25, 2024
Hi @LuisMiguelSS
I think this is WAI, please see:
flutter/packages/flutter/lib/src/material/date_picker.dart
Line 1663 in 36a316d
Even though migrating to Material 3 is recommended, I will keep this issue open for other's input.
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 54e66469a9 (31 hours ago), 2024-04-17 13:08:03 -0700 • Engine revision c4cd48e186 • Dart version 3.3.4 • DevTools version 2.31.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode15.3.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.88.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.86.0 [✓] Connected device (3 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.124 [✓] Network resources • All expected network resources are available. • No issues found!cc: @TahaTesser for thoughts (The related PR #127662)
[-]DatePickerThemeData's `rangePickerHeaderBackgroundColor` not being applied to DateRangePickerDialog[/-][+]DatePickerThemeData's `rangePickerHeaderBackgroundColor` not being applied to DateRangePickerDialog on M2[/+]LuisMiguelSS commentedon Apr 25, 2024
Thanks for the quick reply!
I guess that perhaps this is a form of "encouragement" for switching to Material 3, but, in my opinion, we could make this working back for M2.
In the docs for
useMaterial3, it states:This is perhaps also happening to more properties, so I'm unsure about the places where this would need to be checked (if the idea is to allow this back ""everywhere"").
Sidenote: I tested with
useMaterial3: true, and can confirm that the background color of the header applies in this case, as you mentioned in the related code.TahaTesser commentedon Apr 25, 2024
Thanks for the report. I fixed this for M3 in #127662.
Agree that it should be supported for M2 as well.
Fix `DateRangePickerDialog` does not use `rangePickerHeaderBackground…
github-actions commentedon May 10, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.