How can i show a 24 hour format after a showTimePicker selection in flutter?

Question

I have created a showTimePicker dialogue and I can clearly select a specific hour in 24 hour format but i cannot display it in a text field in 24 Hour format. It falls back to a 12 Hrs format. Here is the code i used.

GestureDetector(
                                                          onTap: () async {
                                                            final TimeOfDay? newTime = await showTimePicker(
                                                              context: context,
                                                              initialTime: trainingStartTime,
                                                              builder: (BuildContext context, Widget? child) {
                                                                return MediaQuery(
                                                                  data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
                                                                  child: child!,
                                                                );
                                                              },
                                                            );
                                                            if (newTime != null) {
                                                              setState(() {
                                                                trainingStartTime = newTime;
                                                              });
                                                            }
                                                          },
                                                          child: Container(
                                                            width: size.width * 0.12,
                                                            height: size.height * 0.05,
                                                            decoration: BoxDecoration(
                                                                border: Border.all(color: Colors.grey.shade400),
                                                                borderRadius: BorderRadius.circular(5)
                                                            ),
                                                            child: Row(
                                                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                                                              children: [
                                                                Text(
                                                                  '${trainingStartTime.format(context)}',
                                                                  style: const TextStyle(
                                                                    //color: Colors.grey,
                                                                    fontSize: 18,
                                                                  ),
                                                                ),
                                                                Icon(Icons.access_time),
                                                              ],
                                                            ),
                                                          ),
                                                      ),

Answer 1

Format your selected time like this,

if (newTime != null) {
    final localizations = MaterialLocalizations.of(context);
    String formattedTime = localizations.formatTimeOfDay(newTime, alwaysUse24HourFormat: true);

    setState(() {
     initialTime = newTime;
     trainingStartTime = formattedTime;
    });
 }

initialTime variable is used to display the selected time inside the timePicker widget and trainingStartTime displays the time inside the Text widget.

Here is the full code,

import 'package:flutter/material.dart';

class TimeExample extends StatefulWidget {
  static var tag = "/TimeExample";

  const TimeExample({Key? key}) : super(key: key);

  @override
  _TimeExampleState createState() => _TimeExampleState();
}

class _TimeExampleState extends State<TimeExample> {
  String? trainingStartTime;
  TimeOfDay initialTime = TimeOfDay.now();
  late Size size;

  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;

    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () async {
            final TimeOfDay? newTime = await showTimePicker(
              context: context,
              initialTime: initialTime,
              builder: (BuildContext context, Widget? child) {
                return MediaQuery(
                  data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
                  child: child!,
                );
              },
            );

            if (newTime != null) {
              final localizations = MaterialLocalizations.of(context);
              String formattedTime = localizations.formatTimeOfDay(newTime, alwaysUse24HourFormat: true);

              setState(() {
                initialTime = newTime;
                trainingStartTime = formattedTime;
              });
            }
          },
          child: Container(
            width: size.width * 0.9,
            height: size.height * 0.05,
            decoration: BoxDecoration(border: Border.all(color: Colors.grey.shade400), borderRadius: BorderRadius.circular(5)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [Expanded(child: Text(trainingStartTime ?? 'N/A', style: const TextStyle(fontSize: 18))), Icon(Icons.access_time)],
            ),
          ),
        ),
      ),
    );
  }
}