Hello friends, In today’s tutorial we would learn about time picker widget known as showTimePicker() in flutter. This widget works in both android & iOS platform and used to get time from app user manually. User can choose time manually in 12 hour format including AM and PM format also. The time picker widget show us the time currently equal to our device time. We can modify it as per our choice. This widget is purely Material design widget. When user select time and click on the OK button then it will return us the selected time. If somehow user clicks on the CANCEL button then it will return us NULL. You can read more about Here. So in this tutorial we would learn about Example of Show Time Picker in Flutter 12 Hour AM PM Format.
Contents in this project Example of Show Time Picker in Flutter 12 Hour AM PM Format :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Parent class MyApp extends StatelessWidget. Here we’re calling the Home class.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: Home()))); } } |
4. Creating Home class extends StatefulWidget. In this class we would make TimePickerState class with createState() method to enable mutable state management.
|
1 2 3 |
class Home extends StatefulWidget { TimePickerState createState() => TimePickerState(); } |
5. Creating our main Child TimePickerState extends State class.
|
1 2 3 4 5 6 |
class TimePickerState extends State<Home> { } |
6. Creating a String variable with NULL SAFTY named as selectedTime. It is used to hold selected time from showTimePicker() widget.
|
1 |
String? selectedTime; |
7. Creating a ASYNC type of function named as displayTimeDialog(). In this function we would call the showTimePicker() widget with application Context and initial time. After getting time from user we would store the time into selectedTime variable using State.
|
1 2 3 4 5 6 7 8 9 |
Future<void> displayTimeDialog() async { final TimeOfDay? time = await showTimePicker(context: context, initialTime: TimeOfDay.now()); if (time != null) { setState(() { selectedTime = time.format(context); }); } } |
8. Creating Widget Build area -> Here we would make 1 Text widget and 1 ElevatedButton widget. We would call the above function on onPressed event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
@override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Center( child: Column( mainAxisAlignment : MainAxisAlignment.center, children: <Widget>[ Text( selectedTime != null ? '$selectedTime' : 'Click Below Button To Select Time...', style: const TextStyle(fontSize: 24), textAlign: TextAlign.center, ), Container( margin: const EdgeInsets.all(8), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: const EdgeInsets.all(7), textStyle: const TextStyle(fontSize: 20), ), child: const Text('Show Time Picker'), onPressed: displayTimeDialog, ), ), ], ), ))); } |
9. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: Center(child: Home()))); } } class Home extends StatefulWidget { TimePickerState createState() => TimePickerState(); } class TimePickerState extends State<Home> { String? selectedTime; Future<void> displayTimeDialog() async { final TimeOfDay? time = await showTimePicker(context: context, initialTime: TimeOfDay.now()); if (time != null) { setState(() { selectedTime = time.format(context); }); } } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Center( child: Column( mainAxisAlignment : MainAxisAlignment.center, children: <Widget>[ Text( selectedTime != null ? '$selectedTime' : 'Click Below Button To Select Time...', style: const TextStyle(fontSize: 24), textAlign: TextAlign.center, ), Container( margin: const EdgeInsets.all(8), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, padding: const EdgeInsets.all(7), textStyle: const TextStyle(fontSize: 20), ), child: const Text('Show Time Picker'), onPressed: displayTimeDialog, ), ), ], ), ))); } } |
Screenshots in Android device :-
