Learn more about DatePicker in Flutter

Tram Ho

I am an iOS developer, when I make a flutter app, I wonder what widget Flutter will show the date of birth, what widget show the appointment calendar, if I find out, I can use the same DatePicker as a calendar to choose the date, month, year. Maybe Android devs are no stranger to it.

1. Set up DatePicker.

Please add the following code:


With just a few lines of code you can implement DatePicker:

To set the DatePicker limit, you set code for two properties: firstDate , lastDate . Above I set the limit until Picker is Min Year Date: 2000, Max Year Date: 2025.

2. Setting dialog box to enter the date.

If you do not like the DatePicker interface like Calendar, you can change it to the date input interface in a dialog box:

Simply in the showDatePicker function whose initialEntryMode property default value is DatePickerEntryMode.calendar , you change it to DatePickerEntryMode.input . Very simple ^ _ ^.

Now, if you know for certain that the birthday is a certain year and you want to choose the year before then choose the date then in the showDatePicker function add the initialDatePickerMode: DatePickerMode.year property.

3. Setting users are only allowed to enter dates within specific limits.

If you want 1 user to only select a certain number of days in a month, you add the: selectableDayPredicate property . Add the following code:

Result :

4. Change the DatePicker text.

Try adding 3 lines of code into the showDatePicker function:

Result :

5. Change the error message.

When the DatePicker is in input mode you can change the error text:

Result :

Similarly, you can change label and hint text. This paragraph you try it yourself:

6. How to have the same DatePicker interface as the target Platform?

Currently, I am using Material Design, so how to use Cupertino Datepicker in iOS? You import the following code:

So when running an Android device, the Datepicker will be displayed in the material, while running iOS it will display cupertino’s DatePicker as shown below:

Thank you for watching my post.

References :


Share the news now

Source : Viblo