Repository navigation
[DatePickerThemeData] doesn't allow changes to the sub-header styling #160591
Copy link
Copy link
Closed
Labels
P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter projectc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterf: date/time pickerDate or time picker widgetsDate or time picker widgetsframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
Steps to reproduce
- Create a Flutter app with a DatePicker widget (the fastest way is to copy-paste the code from the docs [https://api.flutter.dev/flutter/material/showDatePicker.html])
- Style your DatePicker using DatePickerThemeData in the MaterialApp theme
- There's no way to change the sub-header color
Expected results
I should be able to change the sub-header color from a DatePickerThemeData attribute.
Actual results
The only way to change the sub-header attribute is from the colorScheme section, specifying the desired color in the onSurface parameter (in the example, set to orange).
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const DatePickerApp());
class DatePickerApp extends StatelessWidget {
const DatePickerApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
restorationScopeId: 'app',
home: DatePickerExample(restorationId: 'main'),
theme: ThemeData(
colorScheme: ColorScheme.light(onSurface: Colors.orange),
datePickerTheme: DatePickerThemeData(
backgroundColor: Colors.white,
// Add button style to set text color to black
cancelButtonStyle: ButtonStyle(
foregroundColor: WidgetStatePropertyAll(Colors.black),
),
confirmButtonStyle: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(Colors.blue),
foregroundColor: WidgetStatePropertyAll(Colors.white),
),
dayBackgroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return Colors.blue;
}
return Colors.transparent;
}),
dayForegroundColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) {
return Colors.white;
}
return Colors.black;
}),
headerBackgroundColor: Colors.blue,
headerForegroundColor: Colors.white,
inputDecorationTheme: InputDecorationTheme(
labelStyle: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w500,
),
isDense: true,
floatingLabelBehavior: FloatingLabelBehavior.auto,
border: OutlineInputBorder(),
),
todayBackgroundColor: WidgetStateProperty.resolveWith(
(states) {
if (states.contains(WidgetState.selected)) {
return Colors.blue;
}
return Colors.transparent;
},
),
todayForegroundColor: WidgetStateProperty.resolveWith(
(states) {
if (states.contains(WidgetState.selected)) {
return Colors.white;
}
return Colors.blue;
},
),
weekdayStyle: const TextStyle(color: Colors.black),
yearBackgroundColor: WidgetStateProperty.resolveWith(
(states) {
if (states.contains(WidgetState.selected)) {
return Colors.blue;
}
return Colors.transparent;
},
),
yearForegroundColor: WidgetStateProperty.resolveWith(
(states) {
if (states.contains(WidgetState.selected)) {
return Colors.white;
}
return Colors.black;
},
),
yearOverlayColor: WidgetStatePropertyAll(Colors.blue),
),
),
);
}
}
class DatePickerExample extends StatefulWidget {
const DatePickerExample({super.key, this.restorationId});
final String? restorationId;
@override
State<DatePickerExample> createState() => _DatePickerExampleState();
}
/// RestorationProperty objects can be used because of RestorationMixin.
class _DatePickerExampleState extends State<DatePickerExample>
with RestorationMixin {
// In this example, the restoration ID for the mixin is passed in through
// the [StatefulWidget]'s constructor.
@override
String? get restorationId => widget.restorationId;
final RestorableDateTime _selectedDate =
RestorableDateTime(DateTime(2021, 7, 25));
late final RestorableRouteFuture<DateTime?> _restorableDatePickerRouteFuture =
RestorableRouteFuture<DateTime?>(
onComplete: _selectDate,
onPresent: (NavigatorState navigator, Object? arguments) {
return navigator.restorablePush(
_datePickerRoute,
arguments: _selectedDate.value.millisecondsSinceEpoch,
);
},
);
@pragma('vm:entry-point')
static Route<DateTime> _datePickerRoute(
BuildContext context,
Object? arguments,
) {
return DialogRoute<DateTime>(
context: context,
builder: (BuildContext context) {
return DatePickerDialog(
restorationId: 'date_picker_dialog',
initialEntryMode: DatePickerEntryMode.calendarOnly,
initialDate: DateTime.fromMillisecondsSinceEpoch(arguments! as int),
firstDate: DateTime(2021),
lastDate: DateTime(2022),
);
},
);
}
@override
void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
registerForRestoration(_selectedDate, 'selected_date');
registerForRestoration(
_restorableDatePickerRouteFuture, 'date_picker_route_future');
}
void _selectDate(DateTime? newSelectedDate) {
if (newSelectedDate != null) {
setState(() {
_selectedDate.value = newSelectedDate;
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
'Selected: ${_selectedDate.value.day}/${_selectedDate.value.month}/${_selectedDate.value.year}'),
));
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: OutlinedButton(
onPressed: () {
_restorableDatePickerRouteFuture.present();
},
child: const Text('Open Date Picker'),
),
),
);
}
}
Screenshots or Video
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[Paste your output here]Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter projectc: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterf: date/time pickerDate or time picker widgetsDate or time picker widgetsframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team

Activity
[-][DatePickerThemeData] doesn't allor [/-][+][DatePickerThemeData] doesn't allow changes to the sub-header styling[/+]francesco-amonini commentedon Dec 19, 2024
The problem resides at line 787 of the file calendar_date_picker.dart of the flutter/material.dart package, where the color is defined as follow:
not allowing a proper styling from the DatePickerThemeData
maheshj01 commentedon Dec 20, 2024
Hi @francesco-amonini, Thanks for filing the issue. I did try wrapping
DatePickerDialogwith a theme but there doesn't seem to be an API to customize the subheading (one with month/ year)Labeling this as a proposal to allow customizing
subheaderColor26 remaining items
modify toggle mode style with DatePickerTheme (#164102)
tirth-patel-nc commentedon Jun 6, 2025
this seems to be fixed by #164102, can we close this?
modify toggle mode style with DatePickerTheme (flutter#164102)
divyaTyagi123 commentedon Aug 21, 2025
Hi, I’d like to work on this issue. Can I be assigned?
tirth-patel-nc commentedon Aug 21, 2025
tirth-patel-nc commentedon Aug 21, 2025
I believe it has been fixed #160591 (comment)
divyaTyagi123 commentedon Aug 21, 2025
QuncCccccc commentedon Mar 4, 2026
Seems this has been fixed by #164102.
github-actions commentedon Mar 19, 2026
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.