Repository: flutter
Issue: 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
Labels: framework,f: material design,f: date/time picker,a: internationalization,has reproducible steps,P2,team-design,triaged-design,found in release: 3.22,found in release: 3.23

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](https://github.com/flutter/flutter/blob/master/packages/flutter_localizations/lib/src/l10n/generated_material_localizations.dart) has `timeOfDayFormatRaw` set to `TimeOfDayFormat.HH_colon_mm` or `TimeOfDayFormat.HH_dot_mm`:

```dart
  @override
  TimeOfDayFormat get timeOfDayFormatRaw => TimeOfDayFormat.HH_colon_mm;
```

Setting [alwaysUse24HourFormat](https://api.flutter.dev/flutter/widgets/MediaQueryData/alwaysUse24HourFormat.html) 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?

![Screenshot_20240528_151344](https://github.com/flutter/flutter/assets/15979056/9bcc28bb-dae1-4672-b9b2-5d17e4233a27)

### 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

<details open><summary>Code sample</summary>

```dart
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"),
            ),
          ],
        ),
      ),
    );
  }
}
```

</details>


### Screenshots or Video

<details open>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]

</details>


### Logs

<details open><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details open><summary>Doctor output</summary>

```console
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.

```

</details>