modify toggle mode style with DatePickerTheme #164102

MaironLucas · 2025-02-25T15:00:59Z

Add properties to DatePickerThemeData:
- toggleModeStyle allow customization on _DatePickerModeToggleButton TextStyle;
- toggleModeForegroundColor allow changing the color of both button and Icon with consistency;
Compatible with existing code by the use of defaults;
Adjust test to cover new properties

How to customize toggle mode style before:

  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!,
        ),
  );

Now:

  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!,
        ),
  );

Ref #163866
Ref #160591

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

MaironLucas · 2025-02-25T19:56:34Z

I implemented this new feature before seeing that issue #160591 requested a similar feature. That issue already has a linked PR (#161458), but that PR doesn't seem to have received updates since January 24, so my PR could be a valid implementation for both issues.
Also, I took into account the comments and reviews of that PR.

QuncCccccc

Thank you for your contribution! Overall this looks good to me! Just left some comments below.

QuncCccccc · 2025-03-14T20:25:40Z

packages/flutter/lib/src/material/date_picker_theme.dart

+  ///
+  /// The [TextStyle.color] of [toggleModeStyle] is not used, [toggleModeForegroundColor]
+  /// is used instead.
+  final TextStyle? toggleModeStyle;


Do you think if toggleButtonTextStyle would be more straightforward to understand? :)

QuncCccccc · 2025-03-14T20:41:53Z

packages/flutter/lib/src/material/date_picker_theme.dart

+  /// Overrides the default color used for text labels and icons of toggle mode button.
+  ///
+  /// This is used instead of the [TextStyle.color] property of [toggleModeStyle].
+  final Color? toggleModeForegroundColor;


To fix #160591, I think we'd better also apply this color to the month pick button. As for naming, I think subHeaderForegroundColor would be more straightforward to understand.

- Add properties to DatePickerThemeData: - `toggleButtonTextStyle` allow customization on _DatePickerModeToggleButton TextStyle; - `subHeaderForegroundColor` allow changing the color of both button and Icons with consistency; - Compatible with existing code by the use of defaults; - Adjust test to cover new properties Ref flutter#163866 Ref flutter#160591

QuncCccccc

Thanks for the update! Left some comments below. Please let me know if there's any questions:)

QuncCccccc · 2025-03-19T02:41:31Z

dev/tools/gen_defaults/data/date_picker_modal.json

@@ -72,5 +71,7 @@
  "md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color": "onSurfaceVariant",
  "md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color": "onSurfaceVariant",
  "md.comp.date-picker.modal.year-selection.year.unselected.label-text.color": "onSurfaceVariant",
-  "md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color": "onSurfaceVariant"
+  "md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color": "onSurfaceVariant",


This json file is generated from internal google, please don't edit it manually:)

QuncCccccc · 2025-03-19T02:48:56Z

dev/tools/gen_defaults/lib/date_picker_template.dart

@@ -62,6 +62,14 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
  @override
  Color? get backgroundColor => ${componentColor("md.comp.date-picker.modal.container")};

+  @override
+  Color? get subHeaderForegroundColor => ${componentColor("md.comp.date-picker.modal.sub.header.foreground")}.withOpacity(0.60);


We should use the existing token instead of adding new tokens manually:)

Okay, that makes sense. This part was a bit confusing to me. So I should use something like md.comp.date-picker.modal.weekdays.label-text for subHeaderForegroundColor and md.comp.date-picker.modal.range-selection.month.subhead for toggleButtonTextStyle? Thats it?

QuncCccccc · 2025-03-19T03:09:20Z

packages/flutter/lib/src/material/calendar_date_picker.dart

@@ -458,12 +459,12 @@ class _DatePickerModeToggleButtonState extends State<_DatePickerModeToggleButton
                            child: Text(
                              widget.title,
                              overflow: TextOverflow.ellipsis,
-                              style: textTheme.titleSmall?.copyWith(color: controlColor),
+                              style: buttonTextStyle?.apply(color: toggleModeForegroundColor),


If we provide a toggleButtonTextStyle with a custom text color in date picker theme, but don't provide a subHeaderForegroundColor in the date picker theme, this change will cause that the customized text color is not respected, and the text color always defaults to the default subHeaderForegroundColor .

For the text color here, ideally, I think we want to firstly check whether theme's toggleButtonTextStyle's color is empty, if not empty, we respect the color value; but if empty, then check whether theme's subheaderForegroundColor is empty, if not empty, text color should respect it; if empty, we should go to defaults.toggleButtonTextStyle, if still empty, we should check defaults.subHeaderForegroundColor. Does this make sense?

Yeahh, it makes sense. I'm gonna implement it!

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Feb 25, 2025

MaironLucas force-pushed the 163866 branch 3 times, most recently from 9d6a702 to 584b0a1 Compare February 25, 2025 19:41

MaironLucas marked this pull request as ready for review February 25, 2025 19:42

MaironLucas requested a review from matanlurey as a code owner February 25, 2025 19:42

matanlurey removed their request for review February 25, 2025 22:27

dkwingsmt requested a review from QuncCccccc March 12, 2025 18:43

QuncCccccc reviewed Mar 14, 2025

View reviewed changes

MaironLucas force-pushed the 163866 branch from 584b0a1 to 3a2cd99 Compare March 19, 2025 02:07

MaironLucas requested a review from QuncCccccc March 19, 2025 02:07

QuncCccccc reviewed Mar 19, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

modify toggle mode style with DatePickerTheme #164102

modify toggle mode style with DatePickerTheme #164102

MaironLucas commented Feb 25, 2025 •

edited

Loading

MaironLucas commented Feb 25, 2025 •

edited

Loading

QuncCccccc left a comment

QuncCccccc Mar 14, 2025

MaironLucas Mar 19, 2025

QuncCccccc Mar 14, 2025

MaironLucas Mar 19, 2025

QuncCccccc left a comment

QuncCccccc Mar 19, 2025

QuncCccccc Mar 19, 2025

MaironLucas Mar 19, 2025

QuncCccccc Mar 19, 2025

MaironLucas Mar 19, 2025

modify toggle mode style with DatePickerTheme #164102

Are you sure you want to change the base?

modify toggle mode style with DatePickerTheme #164102

Conversation

MaironLucas commented Feb 25, 2025 • edited Loading

Pre-launch Checklist

MaironLucas commented Feb 25, 2025 • edited Loading

QuncCccccc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QuncCccccc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MaironLucas commented Feb 25, 2025 •

edited

Loading

MaironLucas commented Feb 25, 2025 •

edited

Loading