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!
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
maximumYear, both of type
int you can set the minimum and maximum year. With
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!