[TimePicker] Support custom format regardless of device settings

[mehtahardikr]

Steps to Reproduce

final TimeOfDay result =  await showTimePicker(
     context: context,
     initialTime: TimeOfDay(hour: 7, minute: 15),
     builder: (BuildContext context, _) {
       return MediaQuery(
         data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
         child: _,
       );
     },
   );
   if (result != null) {
     print('Selected time: ${result.format(context)}');
   }

Expected results:
alwaysUse24HourFormat: false , means it returns time in 12 hours
so if i select 5 am from time picker it return 5:00 am regardless of device in 24 hour format.
and if i select 5 pm from picker it returns 5:00 pm regardless device in 24 hour format.
Actual results:
if i select 5 am from time picker it return 5:00 [device in 24 hour format]
if i select 5 pm from time picker it return 5:00 pm [device in 12 hour format]

Logs

[✓] Flutter (Channel stable, 2.2.1, on macOS 11.0.1 20B29 darwin-x64, locale en-GB)
    • Flutter version 2.2.1 at /Users/meghdoot/Library/Android/flutter
    • Framework revision 02c026b03c (4 days ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/meghdoot/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.55.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (2 available)
    • iPhone 8 Plus (mobile) • DD25071D-FF64-4C85-89CE-8879154A1E35 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 90.0.4430.212

[TahaTesser]

Related #83302

[HansMuller]

CC @darrenaustin

[Jjagg]

MediaQuery.alwaysUse24HourFormat exists because users on iOS and Android can force the 24h format even if it is not consistent with their selected locale. If this flag is false the current locale should be used for deciding on the clock format, but time picker always uses the 12 hour format for parsing in this case. As a result time picker text input is broken for 24 hour locales when alwaysUse24HourFormat is false. This is inconsistent with the clock format that is used for the dial input, which does correctly determine the clock format.

Especially because of the inconsistency between the two input modes of time picker, I consider this ticket a bug, not a feature request.

I worked around the issue by overriding MediaQuery.alwaysUse24HourFormat to use the hour format of the current locale.

I've seen the MediaQuery.alwaysUse24HourFormat flag falsely mentioned¹² as the way to retrieve the clock format of the system. The format for the locale can be found through the MaterialLocalizations (albeit in a roundabout way), so here's a workaround that overrides the format with the default for the locale (this is how time picker's dial input determines the clock format as well):

final MediaQueryData media = MediaQuery.of(context);
final TimeOfDayFormat timeOfDayFormat = MaterialLocalizations.of(context).timeOfDayFormat(alwaysUse24HourFormat: media.alwaysUse24HourFormat);
final bool use24Hours = hourFormat(of: timeOfDayFormat) != HourFormat.h;

return MediaQuery(
  data: MediaQuery.of(context)
    .copyWith(alwaysUse24HourFormat: use24Hours),
  child: child, // Time picker should be created with a descendant context.
);

I think time picker's behavior was changed in #59191, in response to #54839: a user expected to be able to force the time picker format to 12h by overriding MediaQuery.alwaysUse24HourFormat, because an example used that trick.
For this use case, where users want to override the format, time picker API's could take a nullable flag ClockFormat? to override the format.

enum ClockFormat { twelve, twentyFour }

What I'd expect the time picker to do is:

1. If passed, use the override format.
2. If alwaysUse24HourFormat is true, use ClockFormat.twentyFour
3. Fall back to the default format of the current locale.

Related issues:

• alwaysUse24HourFormat in MediaQuery should be renamed #89744
• [TimePicker] Enter a valid time error in some locales #85527
• Strange behavior in showTimePicker dialog in keyboard input mode #74018

cc @rami-a

Footnotes

1. StackOverflow ↩

2. https://github.com/flutter/flutter/issues/15512#issuecomment-372936692 ↩