Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker #143739

TahaTesser · 2024-02-20T09:26:10Z

fixes Time selector separator in TimePicker is not centered vertically

Separator currently hourMinuteTextStyle to style itself.

This introduces timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle from Material 3 specs to correctly style the separator. This also adds ability to change separator color without changing hourMinuteTextColor.

Specs for the time selector separator

https://m3.material.io/components/time-pickers/specs

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // timePickerTheme: TimePickerThemeData(
        //   hourMinuteTextColor: Colors.amber,
        // )
      ),
      home: Scaffold(
        body: Center(
          child: Builder(builder: (context) {
            return ElevatedButton(
              onPressed: () async {
                await showTimePicker(
                  context: context,
                  initialTime: TimeOfDay.now(),
                );
              },
              child: const Text('Pick Time'),
            );
          }),
        ),
      ),
    );
  }
}

Before	After

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.
All existing and new tests are passing.

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

… for Material 3 Time Picker

gspencergoog

Thanks, Taha!

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

Manual roll Flutter from 5129806 to efee280 (47 revisions) Manual roll requested by dit@google.com flutter/flutter@5129806...efee280 2024-02-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from bf5c003085fd to 7eeb697687d5 (16 revisions) (flutter/flutter#143911) 2024-02-22 katelovett@google.com Update PR template for dart fix (flutter/flutter#143879) 2024-02-22 katelovett@google.com Re-use methods to calculate leading and trailing garbage in RenderSliverMultiBoxAdaptor (flutter/flutter#143884) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] Make impeller goldens test blocking. (#143864)" (flutter/flutter#143896) 2024-02-21 jonahwilliams@google.com [Impeller] Make impeller goldens test blocking. (flutter/flutter#143864) 2024-02-21 jonahwilliams@google.com Disable color filter sepia test for Impeller. (flutter/flutter#143861) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 52ffcaadea41 to bf5c003085fd (12 revisions) (flutter/flutter#143875) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 4128895d79a1 to 52ffcaadea41 (1 revision) (flutter/flutter#143862) 2024-02-21 katelovett@google.com Deprecate redundant itemExtent in RenderSliverFixedExtentBoxAdaptor methods (flutter/flutter#143412) 2024-02-21 reidbaker@google.com Add aab as alias for appbundle (flutter/flutter#143855) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from e16f43eeaaa4 to 4128895d79a1 (1 revision) (flutter/flutter#143856) 2024-02-21 engine-flutter-autoroll@skia.org Roll Packages from 8bba41b to 48048f6 (2 revisions) (flutter/flutter#143853) 2024-02-21 tessertaha@gmail.com Update `hourMinuteTextStyle` defaults for Material 3 Time Picker (flutter/flutter#143749) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 93063f61943a to e16f43eeaaa4 (2 revisions) (flutter/flutter#143827) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from ed49634486e9 to 93063f61943a (1 revision) (flutter/flutter#143826) 2024-02-21 tessertaha@gmail.com `CalendarDatePicker` doesn't announce selected date on desktop (flutter/flutter#143583) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 9100d326475a to ed49634486e9 (2 revisions) (flutter/flutter#143824) 2024-02-21 tessertaha@gmail.com Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker (flutter/flutter#143739) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from efc69946cb1e to 9100d326475a (2 revisions) (flutter/flutter#143820) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 700250436e3f to efc69946cb1e (2 revisions) (flutter/flutter#143816) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 3557277c575c to 700250436e3f (1 revision) (flutter/flutter#143814) 2024-02-21 jonahwilliams@google.com more fixes to unstable impeller goldens. (flutter/flutter#143811) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from cb12a8cc97a1 to 3557277c575c (2 revisions) (flutter/flutter#143807) 2024-02-21 kevmoo@users.noreply.github.com [flutter_tools] enable wasm compile on beta channel (flutter/flutter#143779) 2024-02-21 simonfv@gmail.com Fix initialization of time in repeat on AnimationController (flutter/flutter#142887) 2024-02-21 jonahwilliams@google.com Disable debug banner to stabilize impeller goldens. (flutter/flutter#143794) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (#143281)" (flutter/flutter#143801) 2024-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Add UI Benchmarks (#143542)" (flutter/flutter#143798) 2024-02-20 31859944+LongCatIsLooong@users.noreply.github.com Avoid applying partial dartfixes on CI (flutter/flutter#143551) 2024-02-20 bernaferrari2@gmail.com Add UI Benchmarks (flutter/flutter#143542) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from 1ae2c10e8071 to cb12a8cc97a1 (1 revision) (flutter/flutter#143791) 2024-02-20 nate.w5687@gmail.com Implement `_suspendedNode` fix (flutter/flutter#143556) 2024-02-20 xubaolin@oppo.com Change `ItemExtentBuilder`'s return value nullable (flutter/flutter#142428) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from 27828054f07a to 1ae2c10e8071 (6 revisions) (flutter/flutter#143783) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from e16a260265ad to 27828054f07a (1 revision) (flutter/flutter#143769) 2024-02-20 jonahwilliams@google.com [gold] Always provide host ABI to gold config (flutter/flutter#143621) 2024-02-20 andrewrkolos@gmail.com instead of exiting the tool, print a warning when using --flavor with an incompatible device (flutter/flutter#143735) 2024-02-20 nate.w5687@gmail.com Implementing `switch` expressions: everything in `flutter/lib/src/` (flutter/flutter#143634) 2024-02-20 31859944+LongCatIsLooong@users.noreply.github.com Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (flutter/flutter#143281) 2024-02-20 34871572+gmackall@users.noreply.github.com Delete local.properties that shouldn't have been pushed (flutter/flutter#143774) 2024-02-20 polinach@google.com Clean leaks. (flutter/flutter#142818) 2024-02-20 36861262+QuncCccccc@users.noreply.github.com Introduce tone-based surfaces and accent color add-ons - Part 2 (flutter/flutter#138521) 2024-02-20 greg@zulip.com Explain when and why to use CrossAxisAlignment.baseline (flutter/flutter#143632) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from a41da3701923 to e16a260265ad (2 revisions) (flutter/flutter#143763) ...

) Manual roll Flutter from 5129806 to efee280 (47 revisions) Manual roll requested by dit@google.com flutter/flutter@5129806...efee280 2024-02-22 engine-flutter-autoroll@skia.org Roll Flutter Engine from bf5c003085fd to 7eeb697687d5 (16 revisions) (flutter/flutter#143911) 2024-02-22 katelovett@google.com Update PR template for dart fix (flutter/flutter#143879) 2024-02-22 katelovett@google.com Re-use methods to calculate leading and trailing garbage in RenderSliverMultiBoxAdaptor (flutter/flutter#143884) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] Make impeller goldens test blocking. (#143864)" (flutter/flutter#143896) 2024-02-21 jonahwilliams@google.com [Impeller] Make impeller goldens test blocking. (flutter/flutter#143864) 2024-02-21 jonahwilliams@google.com Disable color filter sepia test for Impeller. (flutter/flutter#143861) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 52ffcaadea41 to bf5c003085fd (12 revisions) (flutter/flutter#143875) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 4128895d79a1 to 52ffcaadea41 (1 revision) (flutter/flutter#143862) 2024-02-21 katelovett@google.com Deprecate redundant itemExtent in RenderSliverFixedExtentBoxAdaptor methods (flutter/flutter#143412) 2024-02-21 reidbaker@google.com Add aab as alias for appbundle (flutter/flutter#143855) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from e16f43eeaaa4 to 4128895d79a1 (1 revision) (flutter/flutter#143856) 2024-02-21 engine-flutter-autoroll@skia.org Roll Packages from 8bba41b to 48048f6 (2 revisions) (flutter/flutter#143853) 2024-02-21 tessertaha@gmail.com Update `hourMinuteTextStyle` defaults for Material 3 Time Picker (flutter/flutter#143749) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 93063f61943a to e16f43eeaaa4 (2 revisions) (flutter/flutter#143827) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from ed49634486e9 to 93063f61943a (1 revision) (flutter/flutter#143826) 2024-02-21 tessertaha@gmail.com `CalendarDatePicker` doesn't announce selected date on desktop (flutter/flutter#143583) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 9100d326475a to ed49634486e9 (2 revisions) (flutter/flutter#143824) 2024-02-21 tessertaha@gmail.com Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker (flutter/flutter#143739) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from efc69946cb1e to 9100d326475a (2 revisions) (flutter/flutter#143820) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 700250436e3f to efc69946cb1e (2 revisions) (flutter/flutter#143816) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from 3557277c575c to 700250436e3f (1 revision) (flutter/flutter#143814) 2024-02-21 jonahwilliams@google.com more fixes to unstable impeller goldens. (flutter/flutter#143811) 2024-02-21 engine-flutter-autoroll@skia.org Roll Flutter Engine from cb12a8cc97a1 to 3557277c575c (2 revisions) (flutter/flutter#143807) 2024-02-21 kevmoo@users.noreply.github.com [flutter_tools] enable wasm compile on beta channel (flutter/flutter#143779) 2024-02-21 simonfv@gmail.com Fix initialization of time in repeat on AnimationController (flutter/flutter#142887) 2024-02-21 jonahwilliams@google.com Disable debug banner to stabilize impeller goldens. (flutter/flutter#143794) 2024-02-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (#143281)" (flutter/flutter#143801) 2024-02-20 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Add UI Benchmarks (#143542)" (flutter/flutter#143798) 2024-02-20 31859944+LongCatIsLooong@users.noreply.github.com Avoid applying partial dartfixes on CI (flutter/flutter#143551) 2024-02-20 bernaferrari2@gmail.com Add UI Benchmarks (flutter/flutter#143542) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from 1ae2c10e8071 to cb12a8cc97a1 (1 revision) (flutter/flutter#143791) 2024-02-20 nate.w5687@gmail.com Implement `_suspendedNode` fix (flutter/flutter#143556) 2024-02-20 xubaolin@oppo.com Change `ItemExtentBuilder`'s return value nullable (flutter/flutter#142428) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from 27828054f07a to 1ae2c10e8071 (6 revisions) (flutter/flutter#143783) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from e16a260265ad to 27828054f07a (1 revision) (flutter/flutter#143769) 2024-02-20 jonahwilliams@google.com [gold] Always provide host ABI to gold config (flutter/flutter#143621) 2024-02-20 andrewrkolos@gmail.com instead of exiting the tool, print a warning when using --flavor with an incompatible device (flutter/flutter#143735) 2024-02-20 nate.w5687@gmail.com Implementing `switch` expressions: everything in `flutter/lib/src/` (flutter/flutter#143634) 2024-02-20 31859944+LongCatIsLooong@users.noreply.github.com Changing `TextPainter.getOffsetForCaret` implementation to remove the logarithmic search (flutter/flutter#143281) 2024-02-20 34871572+gmackall@users.noreply.github.com Delete local.properties that shouldn't have been pushed (flutter/flutter#143774) 2024-02-20 polinach@google.com Clean leaks. (flutter/flutter#142818) 2024-02-20 36861262+QuncCccccc@users.noreply.github.com Introduce tone-based surfaces and accent color add-ons - Part 2 (flutter/flutter#138521) 2024-02-20 greg@zulip.com Explain when and why to use CrossAxisAlignment.baseline (flutter/flutter#143632) 2024-02-20 engine-flutter-autoroll@skia.org Roll Flutter Engine from a41da3701923 to e16a260265ad (2 revisions) (flutter/flutter#143763) ...

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

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

TahaTesser mentioned this pull request Feb 20, 2024

fix(TimePicker): Not centered vertically #143691 #143725

Closed

8 tasks

Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle…

1fd560c

… for Material 3 Time Picker

github-actions bot added the a: internationalization Supporting other languages or locales. (aka i18n) label Feb 20, 2024

Merge branch 'master' into time_picker_selector_separator

a64492c

TahaTesser marked this pull request as ready for review February 20, 2024 16:11

TahaTesser requested a review from gspencergoog February 20, 2024 16:11

gspencergoog approved these changes Feb 20, 2024

View reviewed changes

TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 21, 2024

auto-submit bot merged commit 95cdebe into flutter:master Feb 21, 2024

TahaTesser deleted the time_picker_selector_separator branch February 21, 2024 08:12

engine-flutter-autoroll mentioned this pull request Feb 21, 2024

Roll Flutter from 5129806e6c63 to 3403ca413f6e (35 revisions) flutter/packages#6170

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 21, 2024

95cdebe Add timeSelectorSeparatorColor and `timeSelectorSeparatorTe…

43bcf78

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

engine-flutter-autoroll mentioned this pull request Feb 21, 2024

Roll Flutter from 5129806e6c63 to 4aecbf916b87 (36 revisions) flutter/packages#6171

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 21, 2024

95cdebe Add timeSelectorSeparatorColor and `timeSelectorSeparatorTe…

faa919f

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

engine-flutter-autoroll mentioned this pull request Feb 21, 2024

Roll Flutter from 5129806e6c63 to bfeaf5a7f2c6 (37 revisions) flutter/packages#6172

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 21, 2024

95cdebe Add timeSelectorSeparatorColor and `timeSelectorSeparatorTe…

0bbce95

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

engine-flutter-autoroll mentioned this pull request Feb 21, 2024

Roll Flutter from 5129806e6c63 to b09a015ff567 (38 revisions) flutter/packages#6174

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 21, 2024

95cdebe Add timeSelectorSeparatorColor and `timeSelectorSeparatorTe…

58045c9

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

engine-flutter-autoroll mentioned this pull request Feb 22, 2024

Manual roll Flutter from 5129806e6c63 to efee280cfa93 (47 revisions) flutter/packages#6180

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 22, 2024

95cdebe Add timeSelectorSeparatorColor and `timeSelectorSeparatorTe…

d650f08

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

HansMuller mentioned this pull request Mar 7, 2024

Flutter Framework Team: Notable Commits #121415

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 14, 2024

95cdebe Add timeSelectorSeparatorColor and `timeSelectorSeparatorTe…

5cd5657

…xtStyle` for Material 3 Time Picker (flutter/flutter#143739)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker #143739

Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker #143739

Uh oh!

TahaTesser commented Feb 20, 2024 •

edited

Loading

Uh oh!

gspencergoog left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle for Material 3 Time Picker #143739

Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle for Material 3 Time Picker #143739

Uh oh!

Conversation

TahaTesser commented Feb 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Specs for the time selector separator

Code sample

Pre-launch Checklist

Uh oh!

gspencergoog left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker #143739

Add `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` for Material 3 Time Picker #143739

TahaTesser commented Feb 20, 2024 •

edited

Loading