How to show the flutter timepicker in 12 hours format with AM PM selector

Question

I want to use the Flutter timepicker in 12 hour format with AM/PM selector, but Flutter only shows me the 24 hours format.

I want to get this format:

But flutter only shows me this format:

This is my code:

_selectTime(BuildContext context) async {
  TimeOfDay picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay(hour: 12, minute: 00),
    builder: (BuildContext context, Widget child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child,
      );
    },
  );
}

Nymphet

Answer 1

This should show you what you want

RaisedButton(
  child: Text('Show Time Picker'),
  onPressed: () async => await showTimePicker(
    context: context,
    builder: (BuildContext context, Widget child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child,
      );
    },
  ),
),

Jaipur

The source code of this answer is similar to the original one. I have tried but do not work. – Renatarenate

Answer 2

just use format() method to get AM,PM what you required.

final TimeOfDay picked = await showTimePicker(
  context: context,
  initialTime: timeStart,
);
print(picked.format(context));    // 8:15 PM

Tiffany

Answer 3

you were used showTimePicker() and in this you assign initialTime value than it will consider 24 hour format but if you want 12 hour format follow this way

i make a function this will called from button's onTap : (){} method

myFunction

Future<TimeOfDay?> getTime({
  required BuildContext context,
  String? title,
  TimeOfDay? initialTime,
  String? cancelText,
  String? confirmText,
}) async {
  TimeOfDay? time = await showTimePicker(
    initialEntryMode: TimePickerEntryMode.dial,
    context: context,
    initialTime: initialTime ?? TimeOfDay.now(),
    cancelText: cancelText ?? "Cancel",
    confirmText: confirmText ?? "Save",
    helpText: title ?? "Select time",
    builder: (context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child!,
      );
    },
  );

  return time;
}

here inside builder applied MediaQuery method and MediaQuery will take data , so, here you need to assign as data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),

and you will get 12 hour format Time

if you like watch full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('getTime'),
              onPressed: () async {
                TimeOfDay? time = await getTime(
                  context: context,
                  title: "Select Your Time",
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Future<TimeOfDay?> getTime({
  required BuildContext context,
  String? title,
  TimeOfDay? initialTime,
  String? cancelText,
  String? confirmText,
}) async {
  TimeOfDay? time = await showTimePicker(
    initialEntryMode: TimePickerEntryMode.dial,
    context: context,
    initialTime: initialTime ?? TimeOfDay.now(),
    cancelText: cancelText ?? "Cancel",
    confirmText: confirmText ?? "Save",
    helpText: title ?? "Select time",
    builder: (context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child!,
      );
    },
  );

  return time;
}

thank you

Yellowish

Answer 4

Below snippet, I found form Flutter Github Issues

await showTimePicker(
          initialTime: TimeOfDay.now(),
          context: context,
          builder: (context, child) {
            final Widget mediaQueryWrapper = MediaQuery(
              data: MediaQuery.of(context).copyWith(
                alwaysUse24HourFormat: false,
              ),
              child: child,
            );
            // A hack to use the es_US dateTimeFormat value.
            if (Localizations.localeOf(context).languageCode == 'es') {
              return Localizations.override(
                context: context,
                locale: Locale('es', 'US'),
                child: mediaQueryWrapper,
              );
            }
            return mediaQueryWrapper;
          },
        );

Time Picker is picking format based on locale. Above code is tweaking country of Locale to US because US has 12 hours of time format. Instead of "es" use language code in which you are getting problem.

All credit goes to person who posted solution in above mentioned link. I am reposting it here so, people can find that solution easily.

Scree

Answer 5

Use can this lib Flutter DatePicker

Code to show 12 hours format with AM/PM:

onTap: (){
    DatePicker.showTime12hPicker(context,
        showTitleActions: true,
        onConfirm: (date) {
          _endTimeController.text = DateFormat.jm().format(date);
        }, locale: LocaleType.en);
  },

And see result below:

Rianna