How to Show Time Picker on TextField Tap and Get Formatted Time in Flutter
Introduction
Flutter is a popular framework for building cross-platform applications. It provides a wide range of widgets and tools to create user-friendly and engaging interfaces. One common requirement in many applications is to display a time picker when a text field is tapped and get the formatted time. In this article, we will explore how to achieve this in Flutter.
Understanding the Requirement
To show a time picker on text field tap and get the formatted time, we need to use the `showTimePicker` function provided by Flutter. This function returns a `TimeOfDay` object, which contains the selected hour and minute.
Implementing the Solution
To implement the solution, we will create a `TextField` widget and use the `onTap` property to call the `showTimePicker` function. We will also use the `TextEditingController` to get the selected time and format it.
“`dart
import ‘package:flutter/material.dart’;
class TimePickerExample extends StatefulWidget {
@override
TimePickerExampleState createState() => TimePickerExampleState();
}
class _TimePickerExampleState extends State
final TextEditingController _controller = TextEditingController();
TimeOfDay _selectedTime;
Future
final TimeOfDay? picked = await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
if (picked != null) {
setState(() {
_selectedTime = picked;
controller.text = ‘${selectedTime.hour}:${_selectedTime.minute}’;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextField(
controller: _controller,
onTap: () {
_selectTime(context);
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: ‘Select Time’,
),
),
),
);
}
}
“`
Formatting the Time
To format the time, we can use the `hour` and `minute` properties of the `TimeOfDay` object. We can also use the `intl` package to format the time according to the locale.
“`dart
import ‘package:intl/intl.dart’;
// …
_controller.text = DateFormat(‘hh:mm a’).format(DateTime(
2023,
1,
1,
_selectedTime.hour,
_selectedTime.minute,
));
“`
Conclusion
In this article, we have explored how to show a time picker on text field tap and get the formatted time in Flutter. We have used the `showTimePicker` function and `TextEditingController` to achieve this. We have also formatted the time using the `intl` package.
FAQ
1. How do I show a time picker in Flutter?
You can use the `showTimePicker` function provided by Flutter to show a time picker.
2. How do I get the selected time from the time picker?
You can use the `TimeOfDay` object returned by the `showTimePicker` function to get the selected hour and minute.
3. How do I format the time in Flutter?
You can use the `intl` package to format the time according to the locale.
4. Can I customize the time picker in Flutter?
Yes, you can customize the time picker by using the `initialTime` property and other properties provided by the `showTimePicker` function.
5. Is the time picker available for both iOS and Android platforms?
Yes, the time picker is available for both iOS and Android platforms in Flutter.
