Cupertino DateTime Picker

Easily pick a Date or a Time in your Flutter app

I wrote a routine to quickly and easily pick a date or time in your Flutter app. It wasn’t an original concept but based on the work by developer, Miguel Ruivo. While working on my latest project, you see, I was looking for a means to pick a date and a time using Cupertino (iOS-style) widgets. That’s when I stumbled upon Miguel’s NativeCupertinoPicker.dart. It works with the CupertinoDatePicker class which supplies an iOS-style DateTime picker.

If I didn’t have Miguel’s work as a foundation of my own work, I wouldn’t have the time now to write about it here and share it with you. See how this works? I openly credit Miguel Ruivo here and now for my own contribution.

That’s the power of open source in this day and age. For example, we’re a fledgling community of developers, and our shared efforts contribute to that community as a whole. I’ll pay it forward now and offer the routine, showCupertinoDatePicker.dart, to our fledging Flutter community. Like Ruivo’s routine, my routine also utilizes the CupertinoDatePicker class which, in turn, works with the showCupertinoModalPopup function to display a circular ‘spinner’ at the bottom of the screen of your mobile app.

Many of you will now take a copy of this routine and get on with your day. You’ve got deadlines, and besides, your manager will be coming around your desk shortly. Yes, take it and make it your own. I’ll invite the rest of you to stick around, and I’ll explain how to use this routine in your next Flutter app.

Screenshots Only. Click For Gists.

As always, I prefer using screenshots over gists to show code in my articles. I find them easier to work with, and easier to read. However, you can click/tap on them to see the code in a gist or in Github. Ironically, it’s better to read this article about mobile development on your computer than on your phone. Besides, we program mostly on our computers; not on our phones. For now.

No Moving Pictures No Social Media

Note, there will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram, Facebook, etc. Please, be aware of this and maybe read this article on medium.com

Let’s begin.

Android vs iOS

I’m currently working on an app for a client. Of course, it’s written in Flutter and will perform on an Android phone as well as an iPhone. Below, are screenshots of the same entry screen in the app I’m working on. Clicking on the date field or on the time field will display the appropriate means to pick another date or time depending on the platform. Easy peasy.

As you see, the Material theme is used for Android phones, and the Cupertino theme is used for iPhones. This article will concentrate on the Cupertino version of the DateTime picker. I’ve written its Android counterpart, but I’m not going to share that one. Kidding. I’ll get around to that another day. Besides, like my Cupertino version examined here, there’s really nothing to the Android version. It just works with functions already provided by Flutter: the showDatePicker function and the showTimePicker function. In the case of this Cupertino version, it works with Flutter’s CupertinoDatePicker class and showCupertinoModalPopup function. Let’s take a look now at how these two are used in my provided routine.

Pick a Date

Below is the code you would write, for example, when your user taps on the date field to open up the date picker. My routine, showCupertinoDatePicker, has all the same parameters found in Flutter’s CupertinoDatePicker class. It further includes the parameters found in the function, showCupertinoModalPopup. In other words, you have all the parameters needed to work with these two components. So again, my routine just gets these components together so you can pick a date or a time or even a DateTime value. Take a look at the code below.

Note, this code is to pick a date and so the named parameter, mode, is passed the value, CupertinoDatePickerMode.date. Further, there is the required named parameter, onDateTimeChanged. It’s a voidCallback function anticipating a parameter of type DateTime. Hence, as you see in the code above, an anonymous function is defined to receive such a DateTime value, and in this case, returns this DateTime result to a function called, onChange(). Note, the parameter, leftHanded: false. We’ll get around to that parameter shortly.

Pick a Time

As above, the code below is involved when the user taps on the time field. This time, it is to pick …well…a time, and so the named parameter, mode, is passed the value, CupertinoDatePickerMode.time, which will then display the time and not a date to the user. Again, in this case, the required callback function for the parameter, onDateTimeChanged, is defined to accept the time picked by the user.

The Function

Below is a screenshot of the routine itself and its many parameters. Again these are the same parameters found with the CupertinoDatePicker class and the showCupertinoModalPopup function with some additional parameters particular to this routine. Let’s take a look at these particular parameters now.

Left or Right Handed

The named parameter, leftHanded, can be set to true when you want to switch the buttons around. In the screenshot below, the ‘Save’ button is on the right. However, you have the means to switch it with the Cancel button and be displayed instead on the left. A feature severely lacking with mobile apps.

Text or No Text

I’ve intentionally used icons to represent the two buttons. Doing so then makes the routine more receptive to international use. There’s no Localization to worry about. One icon saves the selected data or time, and the other icon will cancel the operation. However, if you pass the named parameter, useText, with the boolean value of true, then default English labels are used instead. The code displayed below now includes this named parameter, useText. Further down is then a screenshot of the app now displaying text.

Of course, you’re free to pass in your own labels — implementing Localization if so required. The English labels are only there if no other labels were provided to the name parameters, cancelText and doneText. They’re highlighted in the screenshot below. Note, the English labels are gone again.

Further along in the routine, you see where the cancel button is defined. Since it is the cancel button, it’s here where the ‘default’ DateTime value is supplied. This makes it clear to the caller routine that the operation has been cancelled. Next to it, the ‘done’ button is defined. That button is a little simpler as it merely closes the window with the function, Navigator.of(context).pop().

The Cancel Value

When the cancel button is pressed, the DateTime returned is given an explicit value: 0000–01–01 00:00:00.000. Again, making it clear to the caller routine that the operation has been cancelled. For example, to test for a cancelled operation, you could test if the year is zero or not, if(date.year > 0). The screenshot below has a breakpoint in Android Studio conveying such a test for a cancel button press. In the screenshot below, again, if the year is not greater than zero, the ‘initial date’ to reassigned to the result.

Show Your DateTime

What follows further along in the code, is the call to the very function, showCupertinoModalPopup(), itself. It also involves the CupertinoDatePicker class — that actually displays the DateTime picker. You can see the many parameters originally taken in by my routine are passed along to these two components. By the way, I pretty much blatantly copied this stretch of code from Miguel Ruivo’s own work. Cheers Miguel. See how this all works?

Note, my routine has its own onDateTimeChanged() function used to perform some preparations before returning the DateTime value. If in ‘time mode’ for example, only the hour and minute values are returned. The date portion is set to its default value since only ‘the time’ portion is required in this mode. As you see in a closer screenshot of the onDateTimeChanged() function below, it then calls the onDateTimeChanged() function that is required to be passed in by the user.

Popup The Picker

Below is a screenshot of Flutter’s showCupertinoModalPopup function. It creates an ‘iOS-style’ popup that slides up from the bottom of the screen. It has a scrollable ‘circular’ interface and is a modal window which means it prevents the user from interacting with the rest of the app when displayed.

The Picker

Flutter has the class, CupertinoDatePicker with its Cupertino theme in the library, cupertino.dart. We‘ll now take a quick look at the class itself.

Note, CupertinoDatePicker class is a StatefulWidget, and so you can see in its createState() function below, depending on the mode, that the appropriate State object is then instantiated. Picking a date demands its own State object it would seem.

Build Your Format

The date format in this particular State object is then defined in its build() function. It’s based on the Localization settings of your app. (i.e. Where on planet Earth you happen to be running your app will determine the date format.) Note, you can see in the screenshot below, the date picker has its parameter, useText, set to its default value, false, and its parameter, leftHanded, set to true with the icon buttons switched around.

Let’s leave it here for now. You’ve got the idea, and more importantly, you’ve got this little routine now to display a Cupertino DateTime circular spinner picker thingy. Great! It’s just a little something for others to use. I needed something like this, and I didn’t have it. I looked around and found Miguel’s NativeCupertinoPicker.dart. I took it; made it my own —changed it a bit for my own needs, and there you have it! This article was really a rallying cry to all other Flutter developers to share what they wrote. This is all in the effort to make Flutter to ‘go to’ platform for future cross-platform development.

Cheers.

→ Other Stories by Greg Perry

Written by

Freelance Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store