Flutter - Convert 24 hour format to 12 hour format - flutter

Question

I'm getting time using showTimePicker().
TimeOfDay _selectedTime;
Future<Null> _selectTime(BuildContext context) async {
final TimeOfDay timePicked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (timePicked != null)
setState(() {
_selectedTime = timePicked;
});
}
But here _selectedTime is in 24-hour format. Suppose if I select 3.00 PM then it shows 15.00 i.e. it's in 24-hour format.
How can I convert this time into 12-hour format? i.e It should show me 3.00 PM and not 15.00.
I can write the logic to convert it. But is there anything built in to do so?

Answer 1

You can use hourOfPeriod property of TimeofDay to return to you the hour in 12-hour format. That, of course, will be without the AM - PM ending :
TimeOfDay _selectedTime;
Future<Null> _selectTime(BuildContext context) async {
final TimeOfDay timePicked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (timePicked != null)
setState(() {
_selectedTime = timePicked.replacing(hour: timePicked.hourOfPeriod);
});
print(_selectedTime.toString());
}

Answer 2

Use DateFormat to convert time to 12 hours format with AM & PM
TimeOfDay? _selectedTime;
Future<Null> _selectTime(BuildContext context) async {
final TimeOfDay? timePicked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (timePicked != null)
setState(() {
_selectedTime = timePicked;
});
// Conversion logic starts here
DateTime tempDate = DateFormat("hh:mm").parse(
_selectedTime!.hour.toString() +
":" + _selectedTime!.minute.toString());
var dateFormat = DateFormat("h:mm a"); // you can change the format here
print(dateFormat.format(tempDate));
}
Output:
flutter: 8:00 PM
flutter: 1:00 AM
flutter: 6:00 PM

Answer 3

I have created a extension for parsing TimeOfDay to 12 hr format
extension TimeOfDayExtensions on TimeOfDay {
String format12Hour(BuildContext context) {
TimeOfDay time = replacing(hour: this.hourOfPeriod);
MaterialLocalizations localizations = MaterialLocalizations.of(context);
final StringBuffer buffer = StringBuffer();
buffer
..write(time.format(context))
..write(' ')
..write(period == DayPeriod.am
? localizations.anteMeridiemAbbreviation
: localizations.postMeridiemAbbreviation);
return '$buffer';
}
You can use like
pickedTime?.format12Hour(context);

Answer 4

i used jiffy to get 12 hour format and the am/pm
_selectTime(BuildContext context) async {
final TimeOfDay? timeOfDay = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
initialEntryMode: TimePickerEntryMode.input,
hourLabelText: LocalizationKeys.hour.tr,
minuteLabelText: LocalizationKeys.minute.tr,
);
if (timeOfDay != null) {
DateTime dateTime = DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, timeOfDay.hour, timeOfDay.minute);
var jiffy = Jiffy(dateTime);
var format = jiffy.format("hh:mm a");
_lecturesViewModel.selectedTime.value = format;
}