Flutter Create Common Date Picker for Android iOS Example Tutorial

Date Picker widget is used to get pick date from both android & iOS flutter mobile application. In flutter we would use showDatePicker() inbuilt method to display material style alert dialog date picker. We would also set date picker limit using firstDate and lastDate properties. All we have to do is pass the minimum and maximum year inside firstDate and lastDate properties and the Date picker will show us all the years between them. We have to use Future keyword with date picker, This method will get us the current selected date on Alert dialog closure event and returns us the date. If somehow user close the Date picker without choosing the date then it will return us null value. So in this tutorial we would Flutter Create Common Date Picker for Android iOS Example Tutorial.

Contents in this project Flutter Create Common Date Picker for Android iOS Example Tutorial:

1. Setting up intl.dart Package for Flutter Project:

1. The intl.dart flutter package is used to manage the date format. Because by default the showDatePicker() dialog returns us the date with time stamp also. We cannot directly remove the time stamp from showDatePicker() but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code editor.

2. Find the dependencies line and put intl: ^0.16.0 just after it in next line and SAVE the file.

3. Complete source code for my pubspec.yaml file.

4. After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command. This command would refresh the complete project and download the newly added library.

2. Start Coding:

1. Open your project’s main.dart file and import material.dart and intl.dart package.

2. Create void main runApp() method and call our main MyApp() class.

3. Create our main MyApp class extends with State less widget. In this class we would call the DatePicker() class directly here.

4. Create a class named as DatePicker extends with State full widget. In this class we would create createState() method and pass our main DatePickerWidget class with it. The createState() method would enable the mutable state in given class.

5. Create our main class named as DatePickerWidget extends with State.

6. Create a DateTime variable named as selectedDate and assign today’s date to it. We would use this variable to store the selected date.

7. Create a variable named as customFormat and call the DateFormat(‘dd-MM-yyyy’). This would enable the Date-Month-Year format.

8. Create a Future ASYNC function named as showPicker(). Inside this picker we would display the date picker using showDatePicker() method and store the selected date into selected Date variable.

9. Create Widget build area in DatePickerWidget class. Inside the widget build area we would make 1 Text widget and 1 Raised button widget.

10. Complete source code for main.dart file:

Screenshot in Android device:

Flutter Create Common Date Picker for Android iOS Example Tutorial Screenshots in iOS device:

Leave a Reply

Your email address will not be published. Required fields are marked *