Add headerTextColor and headerNavigationButtonColor to DatePickerThemeData #161458

avainfo · 2025-01-10T23:21:13Z

This PR adds two new properties to DatePickerThemeData:

headerTextColor: Allows customizing the text color in the header.
headerNavigationButtonColor: Allows customizing the navigation button color.

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.

avainfo · 2025-01-13T16:39:40Z

I would like to point out that the flutter analyze step is currently failing due to issues unrelated to the changes introduced in this PR. These errors are also present on the upstream/master branch.

The errors reported are specifically related to the missing process_runner package and undefined classes (ProcessRunner, ProcessRunnerResult) in the file test_private/bin/test_private.dart. This file has not been modified by this PR.

Piinks · 2025-01-15T19:14:44Z

Hey @avainfo thanks for contributing! It looks like we already have a pull request open to fix this issue: #161483

Does that look like it will resolve the issue?

avainfo · 2025-01-16T08:26:11Z

Hey @Piinks,

I noticed that the existing PR (#161483) aims to modify the header's overall color, which is great for some use cases. However, I believe a more flexible approach would be to allow separate customization for both the header text color and the navigation buttons' color. It can provides developers greater control over the look and feel of the DatePicker and aligns with Flutter's design philosophy of offering customizable components.

In my implementation:

headerTextColor allows customization of the text displaying the month and year.
headerNavigationButtonColor provides control over the color of the navigation buttons.

This approach ensures backward compatibility while also enhancing the theming capabilities for users who need more granular control.

QuncCccccc

Thanks a lot for the contribution:) Overall it looks good to me! Just left some comments below.

QuncCccccc · 2025-01-22T05:05:12Z

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

  TextStyle? get headerHelpStyle => _textTheme.labelLarge;

+  @override
+  Color? get headerTextColor => _colors.onSurfaceVariant;


The default values in _DatePickerDefaultsM3 are auto generated by running script. Could you help add the change in here, and then run dev/tools/gen_defaults/bin/gen_defaults.dart in the root? The change added in date_picker_template.dart will then appear here.

Running the script should help fix the linux analyze failure below.

Same question here, should the default color be _colors.onSurface.withOpacity(0.60) to make sure it's backward compatible?

QuncCccccc · 2025-01-22T05:10:44Z

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

  TextStyle? get headerHelpStyle => _textTheme.labelSmall;

+  @override
+  Color? get headerTextColor => _colors.onPrimary;


Should both headerTextColor and headerNavigationButtonColor default to colors.onSurface.withOpacity(0.60) in M2 and M3?

Instead of adding just headerTextColor, maybe we can change this to TextStyle subheaderTextStyle. So the default value would be _textTheme.titleSmall?.copyWith(color: colors.onSurface.withOpacity(0.60)). Does this make sense?

Thank you for the suggestion ! Aligning the default values of headerTextColor and headerNavigationButtonColor to colors.onSurface.withOpacity(0.60) for both M2 and M3 is indeed a good idea for consistency. I will update the implementation to reflect this change.

Thank you for the thoughtful suggestion! Changing headerTextColor to subheaderTextStyle makes more sense. I will incorporate this change into the PR and ensure the default value follows your suggestion (_textTheme.titleSmall?.copyWith(color: colors.onSurface.withOpacity(0.60))).

QuncCccccc

Sorry for the late response! Left some comments below:) Please let me know if there's any confusion!

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

QuncCccccc · 2025-02-05T02:36:47Z

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

  TextStyle? get headerHelpStyle => _textTheme.labelLarge;

+  @override
+  TextStyle? get subheaderTextStyle => _textTheme.titleSmall?.copyWith(color: _colors.onSurface.withOpacity(0.60));


Could you follow the instructions in this comment to add the same changes in date_picker_template.dart? Any changes in _DatePickerDefaultsM3 should not be hand-coded:) This will help fix the linux analyzer test.

Please let me know if there's any confusion!

QuncCccccc · 2025-02-05T03:00:59Z

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

-    final ColorScheme colorScheme = Theme.of(context).colorScheme;
-    final TextTheme textTheme = Theme.of(context).textTheme;
-    final Color controlColor = colorScheme.onSurface.withOpacity(0.60);
+    final TextStyle? subHeaderTextStyle = DatePickerTheme.of(context).subheaderTextStyle;


This doesn't look correct? This seems never default to colorScheme.onSurface.withOpacity(0.60);, right?

I think it should be something like:

final DatePickerThemeData datePickerTheme = DatePickerTheme.of(context); final DatePickerThemeData defaults = DatePickerTheme.defaults(context); final TextStyle? effectiveSubheaderTextStyle = datePickerTheme.subheaderTextStyle ?? defaults.subheaderTextStyle;

QuncCccccc · 2025-02-05T03:06:52Z

packages/flutter/test/material/date_picker_theme_test.dart

        'confirmButtonStyle: ButtonStyle#00000(foregroundColor: WidgetStatePropertyAll(${const Color(0xffffff7f)}))',
        'locale: en',
+        'subheaderTextStyle: TextStyle(inherit: true, size: 13.0)',
+        'headerNavigationButtonColor: ${const Color(0xffffff9f)}',


Should the unit test below "DatePickerDialog uses ThemeData datePicker theme (calendar mode)" also be updated and verify whether the subheaders are correctly customized? Either updating the existing tests or adding a new unit test to verify the new properties are able to customize the subheaders is fine:)

flutter-dashboard · 2025-02-25T03:11:21Z

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

avainfo · 2025-02-26T23:56:51Z

I'm closing this PR because I mistakenly used master as the source branch. I have moved my changes to fix-date-picker-subheader and will open a new PR shortly.

Piinks · 2025-02-27T19:19:54Z

Using the master branch is correct: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#overview

The main branch in flutter/flutter is a mirror of master. Master is still the source of truth.

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

avainfo force-pushed the master branch from d38fb7f to e7f767b Compare January 12, 2025 23:04

QuncCccccc reviewed Jan 22, 2025

View reviewed changes

QuncCccccc mentioned this pull request Jan 22, 2025

[DatePickerThemeData] Add Subheader Color Customization #161483

Closed

9 tasks

QuncCccccc self-requested a review January 30, 2025 04:48

QuncCccccc reviewed Feb 5, 2025

View reviewed changes

MaironLucas mentioned this pull request Feb 25, 2025

modify toggle mode style with DatePickerTheme #164102

Merged

9 tasks

avainfo closed this Feb 26, 2025

avainfo force-pushed the master branch from 4451d8f to f0b0805 Compare February 26, 2025 23:54

Add headerTextColor and headerNavigationButtonColor to DatePickerThemeData #161458

Add headerTextColor and headerNavigationButtonColor to DatePickerThemeData #161458

Uh oh!

Conversation

avainfo commented Jan 10, 2025

Pre-launch Checklist

Uh oh!

avainfo commented Jan 13, 2025

Uh oh!

Piinks commented Jan 15, 2025

Uh oh!

avainfo commented Jan 16, 2025

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Jan 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Jan 22, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Jan 22, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Jan 22, 2025

Choose a reason for hiding this comment

Uh oh!

avainfo Jan 24, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

QuncCccccc Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Feb 5, 2025

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Feb 25, 2025

Uh oh!

avainfo commented Feb 26, 2025

Uh oh!

Piinks commented Feb 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

QuncCccccc Jan 22, 2025 •

edited

Loading