Strange behavior in showTimePicker dialog in keyboard input mode

A user of my app who has a Samsung Galaxy S20 FE (Android 11) is reporting that the showTimePicker input dialog is behaving strangely. The locale is English (United Kingdom). In keyboard entry mode, the input dialog is not accepting what should be a valid 24-hour time. A validation error message "Enter a valid time" is shown when pressing OK button for hours 13 to 23 (pm time). For am hours though, the input was accepted. Dial time picker entry mode seems to be working correctly.

I have asked the user to download the Flutter Gallery app and try out the demo time picker. The results were the same i.e. validation failed for hours 13 to 23 in keyboard mode.

The issue is not reproducible on the Android 11 emulator and on my Android 10 Mi A2 phone. I wonder if this issue only affects certain Android 11 devices (e.g. Samsung Galaxy S20 FE), or if there is a conflicting setting on the device.

Steps to Reproduce

Language on device is set to English (United Kingdom).
Launch Flutter Gallery app.
Navigate to Material > Pickers > Time Picker.
Open the time picker.
Dial the time to a pm time e.g. 20:00. Tap the keyboard icon to switch to keyboard input mode.
The keyboard entry dialog appears, showing 20:00; Tap OK without touching the time boxes.

Expected results:
Time accepted on pressing OK. Dialog is closed.

Actual results:
Enter a valid time validation error message in red appears (even though 20:00 is a valid 24-hour time). Dialog remains opened. Tapping on the input text box to edit causes the app to crash/close.

Note: In the case of my app, the time picker did not crash the app (probably due to different Flutter SDK version?). My app in production is running on Flutter 1.22.3 stable.

@jongkb

@jongkb
Is there a way to confirm if this is only happening in Flutter Gallery app and on S20 ?
Although I don't have the said device and on Emulator 11 didn't see the issue:

Is it possible to reach out to the user with below sample code (demo app) and ask them to try it to see if issue persists ?

code sample

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
            onTap: () async {
              TimeOfDay picked = await showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
                builder: (BuildContext context, Widget child) {
                  return MediaQuery(
                    data: MediaQuery.of(context)
                        .copyWith(alwaysUse24HourFormat: true),
                    child: child,
                  );
                },);
            },
            child: Text("SetTime",textAlign: TextAlign.center,))
      ),
    );
  }

@darshankawar

@darshankawar
I'm finally able to reproduce the odd behavior in the time picker on the Android 11 emulator and my own phone. This doesn't look like a Galaxy S20 FE specific issue after all.

The issue can be reproduced under the following conditions:

Language settings set to a locale which inherently uses 24-hour time format (e.g. English (United Kingdom) - en_GB)
Set the Use locale default and Use 24-hour format options to off in the Date & time settings of the device.

This essentially sets the alwaysUse24HourFormat property of Flutter's MediaQuery to false.

The sample code workaround fixes the validation issue. Hopefully this can be addressed at the framework level but with that said, there seems to be a more fundamental issue. With the 24-hour format turned off in Settings, the Flutter time picker UI still presents itself as 24-hour clock instead of a 12-hour clock (with AM/PM).

To confirm what should be the "standard" UI behavior, I noticed that when setting alarm in the native Clock app, the clock indeed switches to 12-hour format when 24-hour format is turned off in Settings.

@jongkb

@jongkb
Thanks for digging deep into this issue. I tried the suggested settings in emulator and sample code.

Although I am unable to replicate the issue, keeping this issue open for further analysis.

stable flutter doctor -v

[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-IN)
    • Flutter version 1.22.5 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 7891006299 (5 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

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

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (1 available)
    • sdk gphone x86 64 arm64 (mobile) • emulator-5554 • android-x64 • Android
      11 (API 30) (emulator)

! Doctor found issues in 1 category.

I have the same bug, I'm on the latest flutter version.
do I need to provide more data?

This bug still continues. Apparently Flutter should get the time format information to use in the time picker using the OS configuration and not the app's location. Because we can have people who are in a location that the default is 24hrs, however, they set it as the default to be used as 12hrs.

[material_ui] Fix time picker input validation for 24-hour locales (#…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Strange behavior in showTimePicker dialog in keyboard input mode #74018

Steps to Reproduce

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Strange behavior in showTimePicker dialog in keyboard input mode #74018

Description

Steps to Reproduce

Activity

darshankawar commented on Jan 15, 2021

jongkb commented on Jan 16, 2021

darshankawar commented on Jan 18, 2021

Ham3D commented on Apr 28, 2021

kindaniel commented on May 26, 2021

4 remaining items

github-actions commented on Oct 20, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions