-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Open
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 widgetsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.good first issueRelatively approachable for first-time contributorsRelatively approachable for first-time contributorsteam-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]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 widgetsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.good first issueRelatively approachable for first-time contributorsRelatively approachable for first-time contributorsteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
