Repository navigation
If Locale is 24-hour by default, but device is set to 12-hour format, it's impossible to show 12-hour time picker UI to match device setting #149179
Description
See the code sample for a reproducible example.
This is basically a duplicate of #54839 which seems to have been closed accidentally without any resolution, and is now locked.
#83707 is similar, but that issue is concerned with string formatting using TimeOfDay.format(), which is a slightly different issue and has a workaround - this issue is concerning the time picker UI shown to the user, which as far as I know has no workaround.
#141501 is related, but as that has raised 2 separate issues (this issue and a separate accessibility issue regarding the size of the circles on the time picker), I suggest this issue remains, and #141501 is renamed to deal just with the accessiblity issue.
Basically, if your locale is set to one which uses 24-hour format by default (for example, en-GB, fr, es, vi), it is not possible to show the time picker with the 12-hour selection UI (with AM and PM), even if the user's device is set to 12-hour time format (tested on Android emulator and Samsung S22).
This appears to affect all of the 38 locales whose definition in generated_material_localizations.dart has timeOfDayFormatRaw set to TimeOfDayFormat.HH_colon_mm or TimeOfDayFormat.HH_dot_mm:
@override
TimeOfDayFormat get timeOfDayFormatRaw => TimeOfDayFormat.HH_colon_mm;Setting alwaysUse24HourFormat on MediaQuery to false has no effect, because the behaviour of alwaysUse24HourFormat seems to be that if alwaysUse24HourFormat is set to false, it falls back to the default of the Locale.
This means that there doesn't seem to be any way to make showTimePicker show 12-hour format at all for locales such as en-GB.
I'm not sure if this is a bug or a feature request, as the logic and reasoning behind the alwaysUse24HourFormat flag is quite confusing - why would you have that flag and not an equivalent alwaysUse12HourFormat or some alternative?
Expected results
When Locale is en-GB, and alwaysUse24HourFormat = false, and user's device is set to 12-hour format, showTimePicker shows 12-hour format UI
Actual results
When Locale is en-GB, and alwaysUse24HourFormat = false, and user's device is set to 12-hour format, showTimePicker shows 24-hour format UI (tested on Android only)
Code sample
Code sample
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _alwaysUse24HourFormat = true;
@override
Widget build(BuildContext context) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(
alwaysUse24HourFormat: _alwaysUse24HourFormat,
),
child: MaterialApp(
localeListResolutionCallback: (List<Locale>? locales, Iterable<Locale> supportedLocales) {
// Using any locale whose definition in generated_material_localizations.dart
// has `timeOfDayFormatRaw` set to `TimeOfDayFormat.HH_colon_mm` or
// `TimeOfDayFormat.HH_dot_mm` will reproduce the issue
// return const Locale('et');
// return const Locale('vi');
// return const Locale('es');
// return const Locale('fr');
return const Locale('en', 'GB');
},
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en'), // English
],
home: MyHomePage(
alwaysUse24HourFormat: _alwaysUse24HourFormat,
onAlwaysUse24HourFormatChanged: (value) {
setState(() {
_alwaysUse24HourFormat = value;
});
}
),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({
required this.alwaysUse24HourFormat,
required this.onAlwaysUse24HourFormatChanged});
final bool alwaysUse24HourFormat;
final ValueChanged<bool> onAlwaysUse24HourFormatChanged;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Switch(
value: alwaysUse24HourFormat,
onChanged: onAlwaysUse24HourFormatChanged,
),
Text(
"alwaysUse24HourFormat: ${MediaQuery.of(context).alwaysUse24HourFormat}",
),
FilledButton(
onPressed: () {
// There is NO WAY to make this show the 12-hour UI with AM/PM:
showTimePicker(context: context, initialTime: TimeOfDay.now());
},
child: const Text("Show time picker"),
),
],
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.1, on macOS 14.5 23F79 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.89.1)
[✓] Connected device (5 available)
! Error: Browsing on the local area network for Test user’s iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for Test user’s Apple Watch. Ensure the device is unlocked and discoverable via Bluetooth. (code -27)
[✓] Network resources
! Doctor found issues in 1 category.
Activity
huycozy commentedon May 29, 2024
Hi @jamesncl,
I see there is also another issue at #141501. On #141501, it seems to report this issue:
You can leave there a comment for your case with Locale of
en-GB.Even so, there are two separate issues on #141501:
12-hour format is not showingandcircles in 24-hour format are too close. Let's check that issue and share your thoughts.jamesncl commentedon May 29, 2024
@huycozy thank you, I hadn't seen #141501 - I have left a comment there. I suggest that because #141501 raises 2 separate concerns (accessibility issue with the time picker, and not showing 12-hour time picker for certain locales), #141501 is renamed to just track the accessiblity issue, and this issue could remain as-is to track the 12-hour issue?
huycozy commentedon May 30, 2024
I saw your comment there. I will mark this as a separate one for
12-hour format is not showingissue.flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.22.1, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.22.1 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision a14f74ff3a (11 hours ago), 2024-05-22 11:08:21 -0500 • Engine revision 55eae6864b • Dart version 3.4.1 • DevTools version 2.34.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode15.3.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] VS Code (version 1.89.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.88.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.76 [✓] Network resources • All expected network resources are available. • No issues found!baptistesx commentedon Sep 13, 2024
I guess it's related to this:
On a phone with 12h time format in settings, timePicker (Locale('fr') => 24h format) with input mode, enter 02:30, it fills the field with 14:30.
Also if I enter 18:00 and try to validate, I've got an error:
If I set the phone to 24h format, it works