CupertinoDatePicker — All Cupertino Widgets

In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important class, and much more in this series. All the articles will be less than 2 minutes long, so you can read them every time :) In addition to that, they will be very easy to understand, following the motto

Make everything as simple as possible, but not simpler. ~ Albert Einstein

If you want to check out the other articles of this series, check out this list. Let’s get started!

Happy reading!

CupertinoDatePicker

CupertinoDatePicker is the Cupertino-styled Widget for picking a date, a time, or a date and a time. So let’s take a look at it now!

First, there is the mode property. It takes CupertinoDatePickerMode and can be CupertinoDatePickerMode.time (for picking a time), CupertinoDatePickermode.date (for picking a date) and CupertinoDatePickerMode.dateAndTime (for picking a date and a time). That is pretty easy, right? Now let’s talk about the values it can have. With minimumYear and maximumYear, both of type int you can set the minimum and maximum year. With minimumDate and maximumDate, both of type DateTime, you can set the minimum and maximum date the picker can have. We only have a few properties left to discuss. First, let’s talk about initialDateTime of type DateTime. As the name suggests, it is the initial date time, but must conform to the intervals of minimum- & maximum year, as well as the minimum- & maximum date. In addition to that, this property must not be null.

Now let’s talk a little bit about styling. With use24hFormat of type bool, you determine if the picker should use the 24h format or not. backgroundColor sets the background color and dateOrder of type DatePickerDateOrder determines the order of the columns inside of the CupertinoDatePicker in-date mode. But you don’t have to worry about setting it manually to every location, because the default is already the locale’s default date format. But if you want to read more about it, check out this link.

Now, only one thing is missing: What will happen, when the user has selected the date/time? For that, you will use onDateTimeChanged of type ValueChanged<DateTime> to do something when it changes.

Let’s finally look at an example:

Further reading & Conclusion

In this article, you have learned how to use the CupertinoDatePicker Widget.

Did you know that there are great packages that enhance your development enormously? For example Freezed, Isar, or Flutter Hooks. If you want to learn about these great packages, I have entire tutorials about them. Check them out here.

In the following few articles, I will introduce more Cupertino widgets, elementary classes, and more stuff. If you don’t want to miss this, I recommend you follow me!

Thanks for reading, have a nice day!