Skip to content

add parameter on DatePickerThemeData to customize the text style of the toggle mode button #163866

Closed

Description

@MaironLucas

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'),
          ),
        ),
      );
}

Activity

  1. MaironLucas commented on Feb 21, 2025

    @MaironLucas
    ContributorAuthor

    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.

  2. added
    in triagePresently being triaged by the triage team
    c: new featureNothing broken; request for a new capability
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    c: proposalA detailed proposal for a change to Flutter
    team-designOwned by Design Languages team
    and removed
    in triagePresently being triaged by the triage team
    on Feb 24, 2025
  3. MaironLucas commented on Feb 25, 2025

    @MaironLucas
    ContributorAuthor

    I was looking at open issues and PRs, looks like what I am asking/suggesting is very similar to what is indicated at #160591

  4. 7 remaining items

  5. tirth-patel-nc commented on Jun 6, 2025

    @tirth-patel-nc
    Member

    this seems to be fixed by #164102, can we close this?

  6. MaironLucas commented on Jun 6, 2025

    @MaironLucas
    ContributorAuthor

    this seems to be fixed by #164102, can we close this?

    Yeahh, we can close it!

  7. added
    r: fixedIssue is closed as already fixed in a newer version
    on Jun 6, 2025
  8. github-actions commented on Jun 20, 2025

    @github-actions

    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 -v and a minimal reproduction of the issue.

  9. locked as resolved and limited conversation to collaborators on Jun 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projectc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: date/time pickerDate or time picker widgetsframeworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions