CupertinoTimerPicker — All Cupertino Widgets

In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important classes, 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 effortless 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!

CupertinoTimerPicker

The CupertinoTimerPicker is one of the Cupertino pickers. It’s used to select the countdown time of a timer (e.g. ring in 3h, 45 min, and 26 secs). It is very easy to implement into your app, that’s why we will take a look at it now:

The most important property is mode of type CupertinoTimerPickerMode. With this one, you can determine what the users will be able to select. With CupertionTimerPickerMode.hm the user can select the hours and minutes, with CupertionTimerPickerMode.ms he will be able to select minutes and seconds and guess what, with CupertinoTimerPickerMode.hms the user will be able to select hours, minutes and seconds.

Now there is also the minuteInterval and secondInterval property, both of type int. It just determines the granularity of the minute/second spinner. It has to be a positive integer factor of 60 (Makes sense, right ;)?)

Also quite important is the initialTimerDuration of type Duration, which sets the initial duration when the user opens the timer the first time.

And of course, there is the onTimerDurationChanged property, which is a ValueChanged<Duration>. I think we all know what you can do with this property.

The last two properties are tiny customizations. We can set the background color with the backgroundColor property and define how the picker should be positioned within its parent with alignment. That’s it!

Now let’s take a look at an example:

Further reading & Conclusion

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

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, essential classes, and more stuff. If you don’t want to miss this, I recommend you follow me!

Thanks for reading, have a nice day!