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.

No Moving Pictures No Social Media

Let’s begin.

Other Stories by Greg Perry

Android vs iOS

Material version vs. Cupertino version

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

  onTap: () {
showCupertinoDatePicker(context,
mode: CupertinoDatePickerMode.date,
initialDateTime: date,
leftHanded: false,
onDateTimeChanged: (DateTime date) {
DateTime result;
if (date.year > 0) {
result = DateTime(date.year, date.month, date.day,
time.hour, time.minute);
} else { // The user has hit the cancel button.
result = initDate;
}
onChanged(result);
});
},
)

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

  onTap: () {
showCupertinoDatePicker(context,
mode: CupertinoDatePickerMode.time,
initialDateTime: time,
leftHanded: false,
onDateTimeChanged: (DateTime time) {
DateTime result;
if (time.hour > 0 || time.minute > 0) {
result = DateTime(date.year, date.month, date.day,
time.hour, time.minute);
} else { // The user has hit the cancel button.
result = DateTime(date.year, date.month, date.day,
initTime.hour, initTime.minute);
}
onChanged(result);
});
},

The Function

Left or Right Handed

Text or No Text

  showCupertinoDatePicker(context,
mode: CupertinoDatePickerMode.date,
initialDateTime: date,
// leftHanded: true,
useText: true,
onDateTimeChanged: (DateTime date) {
DateTime result;
if (date.year > 0) {
result = DateTime(date.year, date.month,
time.hour, time.minute);
} else {
result = initDate;
}
onChanged(result);
});

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().

showCupertinoDatePicker function

The Cancel Value

Show Your DateTime

showCupertinoDatePicker function

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.

showCupertinoDatePicker function

Popup The Picker

showCupertinoModalPopup function

The Picker

import 'package:flutter/cupertino.dart'
CupertinoDatePicker class

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.

CupertinoDatePicker class

Build Your Format

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

DECODE Flutter on YouTube

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