Example of Show Time Picker in Flutter 12 Hour AM PM Format

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.

2. Creating void main runApp() method and here we would call our main MyApp class.

3. Creating our main Parent class MyApp extends StatelessWidget. Here we’re calling the Home class.

4. Creating Home class extends StatefulWidget. In this class we would make TimePickerState class with createState() method to enable mutable state management.

5. Creating our main Child TimePickerState extends State class.

6. Creating a String variable with NULL SAFTY named as selectedTime. It is used to hold selected time from showTimePicker() widget.

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.

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.

9. Complete source code for main.dart file :-

Screenshots in Android device :-

Example of Show Time Picker in Flutter 12 Hour AM PM Format Example of Show Time Picker in Flutter 12 Hour AM PM Format

Leave a Reply

Your email address will not be published.