[Material] Redesign Time Picker - #59191

The documentation for showTimePicker already includes several examples, and it's just one function you call, so I don't think a dart pad example would add much more

https://api.flutter.dev/flutter/material/showTimePicker.html

When will this change be live? @rami-a

When will this change be live? @rami-a

This is already live on Flutter's master channel

So I'm guessing its not in the stable channel? @Zazo032 Thank you for the fast reply.

Uh, my users actually reported the 24h dial as a bug and I had to revert this locally.

(If this is not the appropriate place to discuss it, which I think is very likely, I'd be grateful if someone could point me to the right venue.)

The point of the ring mode for the time picker is to emulate an analog clock; people are used to these, and can tell at a glance what hour it's pointing to. While there is such a thing as 24h analog clocks, those are novelties, and I've never seen someone actually use one. So a 24h ring makes very unintuitive UX, and is therefore basically useless.

The PR mentions it reflects the upcoming Material spec. Is that visible anywhere public, or is it internal to Google? Last I checked, the published guidelines said a time picker ‘is not under development’.

hi @lalomartins
Thanks for reaching out! We always appreciate feedback from the community!
One of the main goals was to improve the accessibility of selecting time, since this was a commonly reported issue with the previous design.
We are continuing to study this component design to make sure it is usable and behaves as expected for most users.
If you could share some details on the app use-cases you are targeting with the Time Picker and some info on the locale of the users, that would be very helpful.

@andrelabonte just here or do you want me to contact you by email? My address is… easy to find.

It's a private app with a very small audience, but quite international, and I'm very happy to give feedback.

The app in which I got feedback basically tracks events. It makes an usually correct guess about when it happened, but gives users the option to edit it. People who gave me feedback love the Material picker because they can type the number if they want, or pick from the dial when they prefer that, and the dial mimics an analog clock, so they know by reflex where the hours and minutes go. When I showed them a version built against Flutter dev, the only complaint I got was that the dial was no longer useful.

Now that 1.20 has been released and the time picker spec has actually been published, I can't help but make two observations:

1. The spec doesn't actually state you should draw 24h on a single dial. Unfortunately, it also doesn't say you shouldn't, and all screenshots are in 12h mode.

2. In ‘Principles’, it states the reason is that the dial is ‘Familiar’, which is exactly why I wanted to use it in the first place. I quote: “The analog clock face option provides an added level of assurance and confirmation when picking times.” To me, this heavily implies the 24h mode should stick to a clock layout, and keep 12h. Whether you do this by having two concentric dials as it was before, or a separate AM/PM switch, I'll have to leave to the designers; but clearly the ‘24h analog clock’ mode fails to fulfil this principle.