add parameter on DatePickerThemeData to customize the text style of the toggle mode button #163866
Description
Use case
It is not possible to customize the text style of the toggle mode button of the DatePickerDialog using the DatePickerTheme.
To be able to achieve this customization, it's necessary to wrap the dialog with a Theme and change the textTheme, as in the example below:
class DatePickerExample extends StatelessWidget {
const DatePickerExample({super.key});
@override
Widget build(BuildContext context) => Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => showDatePicker(
context: context,
firstDate: DateTime(2025),
lastDate: DateTime(2026),
builder: (context, child) => Theme(
data: ThemeData.light().copyWith(
textTheme: TextTheme(
titleSmall: TextStyle(
fontSize: 16,
),
),
datePickerTheme: DatePickerThemeData(
dayStyle: TextStyle(
fontSize: 12,
)),
),
child: child!,
),
),
child: Text('Show Date Picker'),
),
),
);
}Proposal
It would be better if DatePickerThemeData had a parameter to explicitly set the style for the toggle button, so just a wrap with a DatePickerTheme would be enough to customize the dialog widget. Something like:
class DatePickerExample extends StatelessWidget {
const DatePickerExample({super.key});
@override
Widget build(BuildContext context) => Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => showDatePicker(
context: context,
firstDate: DateTime(2025),
lastDate: DateTime(2026),
builder: (context, child) => DatePickerTheme(
data: DatePickerThemeData(
toggleModeStyle: TextStyle(
fontSize: 16,
),
dayStyle: TextStyle(
fontSize: 12,
),
),
child: child!,
),
),
child: Text('Show Date Picker'),
),
),
);
}