How to show time in AM or PM format from TimeOfDay with flutter?

Question

I used ShowTimePicker class to select time according to my wish but want to show it in PM or AM with Text .like 9:00 AM, 10:00 PM.

means take 12 hours format.

Code :

import 'package:flutter/material.dart';



class ShowTimePickerDemo extends StatefulWidget {
  @override
  _ShowTimePickerDemoState createState() => _ShowTimePickerDemoState();
}

class _ShowTimePickerDemoState extends State<ShowTimePickerDemo> {
  TimeOfDay pickedTime = TimeOfDay.now();

  Future<Null> _selectTime(BuildContext context) async {
    final TimeOfDay response = await showTimePicker(
      context: context,
      initialTime: pickedTime,
    );
    if (response != null && response != pickedTime) {
      setState(() {
        pickedTime = response;
      });
    }
  } 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(pickedTime.toString()),
            SizedBox(height:10),
            FlatButton(
              color: Colors.blue,
              onPressed: (){
                _selectTime(context);
              }, 
              child: Text("Show Time Pikcer")
            )
          ],
        ),
      ),
    );
  }
}

OutPut screenshot:

Solution 1

Once you have the time selected, you can format it with new DateFormat.jm(), which will output, for example, 5:00 PM. See DateFormat docs for more.

Edit: You could do this a few ways.

One way is to use a function, like this:

String formatTimeOfDay(TimeOfDay tod) {
    final now = new DateTime.now();
    final dt = DateTime(now.year, now.month, now.day, tod.hour, tod.minute);
    final format = DateFormat.jm();  //"6:00 AM"
    return format.format(dt);
}

Another way is to use this is in the example provided from the docs:

print(new DateFormat.yMMMd().format(new DateTime.now()));

Solution 2

When you have identified the TimeOfDay class of Flutter, you can now convert the used variable to change it's current format to 12-hour system.

TimeOfDay initialTime = TimeOfDay.now();

initialTime.format(context)

Comments

[Shruti Ramnandan Sharma]

Okay, so how do I write code? my selected time in pickedTime variable , which type of TimeOfDay. so where i put into new DateFormat.jm().?