Repository navigation
add parameter on DatePickerThemeData to customize the text style of the toggle mode button #163866
Copy link
Copy link
Closed
Labels
P3Issues that are less important to the Flutter projectIssues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityc: 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
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'),
),
),
);
}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: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityc: 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
MaironLucas commentedon Feb 21, 2025
I already have a concise idea of how to implement it... so probably in the next few days I will open a PR related to this.
feat: modify toggle mode style with DatePickerTheme
feat: modify toggle mode style with DatePickerTheme
feat: modify toggle mode style with DatePickerTheme
feat: modify toggle mode style with DatePickerTheme
feat: modify toggle mode style with DatePickerTheme
MaironLucas commentedon Feb 25, 2025
I was looking at open issues and PRs, looks like what I am asking/suggesting is very similar to what is indicated at #160591
7 remaining items
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
feat: sub header style with DatePickerTheme
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?
MaironLucas commentedon Jun 6, 2025
Yeahh, we can close it!
github-actions commentedon Jun 20, 2025
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.