modify toggle mode style with DatePickerTheme

[MaironLucas]

• 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]

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]

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

[MaironLucas]

Done

[QuncCccccc]

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.

[MaironLucas]

Done

[QuncCccccc]

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

[QuncCccccc]

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

[MaironLucas]

Done!

[QuncCccccc]

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

[MaironLucas]

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?

[MaironLucas]

Done!

[QuncCccccc]

Sorry for the late reply. Yes, these tokens are exported from google internal token generator, we should just pick tokens instead of creating new ones ourselves:)

[QuncCccccc]

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?

[MaironLucas]

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

[MaironLucas]

Done! I think the check on defaults.subHeaderForegroundColor is redundant because defaults.toggleButtonTextStyle already gets it.

[QuncCccccc]

This looks great to me! Can we add one more test to verify the datePickerTheme.toggleButtonTextStyle can override datePickerTheme.subHeaderForeground when they both have some custom color values:)

[QuncCccccc]

For consistency,

Suggested change

	final Color? toggleModeForegroundColor =
	final Color? subHeaderForegroundColor =

[MaironLucas]

@QuncCccccc About the test, I think I don't know exactly how to make it. Should I write a new test at date_picker_theme_test or edit one that already exists to verify this override?

[MaironLucas]

Hi, @QuncCccccc. How is it going? I pushed the commit with two tests, verifying if the color of toggleButtonTextStyle is respected over subHeaderForegroundColor and also a test verifying if subHeaderForeground is used when toggleButtonTextStyle.color is not defined.

[QuncCccccc]

The tests look good to me! Could you help fix the conflict and the failures, then we are good to go!

[MaironLucas]

Hi, nice!!
Well, the conflict is fixed. But about the failures, I am unsure of what to do to fix them. Could you help me? @QuncCccccc

[QuncCccccc]

LGTM! Thank you for your contribution!

[QuncCccccc]

nit:

Suggested change

	/// Overrides the default text style used for the text of toggle mode button
	/// Overrides the default text style used for the text of toggle mode button.

[justinmc]

LGTM 👍. Thanks for jumping in to add this!

[justinmc]

Nit: Period at the end.

[auto-submit]

autosubmit label was removed for flutter/flutter/164102, because - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.