CupertinoPicker in Flutter

Mahesh Jamdade
Dec 22, 2018 · 5 min read

This is my first Story on Medium.com and it's about Flutter, If you are reading this it probably means you must have heard about Flutter, Well for those who are not aware of it

Flutter is Google’s new Mobile Sdk that helps you build Awesome Mobile apps real Quick.Flutter Will change the way we use and experience Android apps.

what I mean is the coolest apps so far we have seen had clicks and touches and gestures double taps but Flutter takes it even further to the next Level,you can experience one of the most Beautiful apps developed by Flutter Team here. Well, my Post is not about What flutter,if you would like to Know more about Flutter I recommend you reading Deven Joshi’s Post which gives a very good Overview of Flutter.


In this Story, I will show you How to implement differentCupertino Pickers in Flutter by the end of this story we will be implementing this

Basic “Hello World ”Flutter Code

This is a simple Dart Code that has a “HELLO WORLD” Text() Widget written inside a Column in the Center of the Screen

Now lets remove the Text Widget and add a MaterialButton that opens an empty BottomSheet when Pressed,We will use this Button to show a CupertinoDatePicker.

CupertinoDatePicker

The CupertinoDatePicker is capable of Showing the DateTime, or the Date or only Time on the Picker

This code adds a simple Material Button and opens a ModalBottomSheet onpress the height of the Bottom Sheet is indicated by the height attribute that takes in 1/3 rd height of the Device.

Now let us add the child to the Container of the BottomSheet Now we will add the actual CupertinoDatePicker as the child it takes in a couple of Arguments and its mandatory to pass in the onDateTimeChanged argument

(Required Arguments)

onDateTimeChanged: this is a Callback called when the selected date and/or time changes, and it must not be null, it takes in an Argument of type DateTime that gives the changed DateTime every time this method is called. In simple words, this gets called everytime the picker is scrolled.

onDateTimeChanged: (DateTime newdate) {print(newdate);},

watch out the DebugConsole it should print the selected datetime every time you scroll the picker.

(Optional Arguments)

initialDateTime: the time that is selected when the picker is shown you can set it to current date and time by assigning it to DateTime.now().

use24hFormat: Takes in a Boolean Value either or True or False to set The 24 hr Time Format depending on the value.

maximumDate: The Maximum date you can Scroll the Picker Specified by the type DateTime(),

e.g new DateTime(2018,12,30), would allow us to scroll until Dec 30 2018 ,you can also specify the time on that Date separated by Commas DateTime(2018,12,30,11,30).

The DateTime() class takes in following arguments

DateTime(int year,[int month = 1,int day = 1,int hour = 0,int minute = 0,int second = 0,int millisecond = 0,int microsecond = 0])

Note that the arguments in [] are Optional

minimumYear: takes in the minimum year in Integer you wanna scroll from

maximumYear: takes in the Maximum year in Integer you wanna scroll up too.

minuteInterval: The interval between two successive minute pickers should be an integer factor of 60, e.g minuteInterval:2 would increment minute picker by 2

mode: The format of the Picker, whether you want to show only Date or DateTime or only Time on the Picker, you can provide one of the following options

CupertinoDatePickerMode.dateAndTime,
CupertinoDatePickerMode.date
CupertinoDatePickerMode.time

We can add another Material Button to call the CupertinoTimerPicker since we are

CupertinoTimerPicker

the TimePicker Widget shows only time on the picker

(required Arguments)

onTimerDurationChanged: Callback called when the timer duration changes.it gets called everytime you scroll the TimePicker and the changed value is received in the arguments of type Duration.SetState to reload the Widget when a particular change has to be done.

onTimerDurationChanged: (Duration changedtimer) {
SetState((){
});
}

if you want the timer to retain the timer previously scrolled you need to create variable of type Duration and keep reassigning the value.

Duration initialtimer = new Duration();

And then set the value of initalTimerDuration to initialtimer which holds previously scrolled value, everytime the onTimerDurationChanged is called we store the changedtimer (i.e current selected value) in initialtimer. now if you scroll the timer and then again open the picker you should see the timer selected to previously scrolled value.

initialTimerDuration: initialtimer,
onTimerDurationChanged: (Duration changedtimer) {
SetState(() {
initialtimer = changedtimer;
});
}

(Optional Arguments)

mode: the Format of Picker which displays the picker in one of the following format

1.hours minute seconds

2.hours minutes

3.minutes seconds

CupertinoTimerPickerMode.hms
CupertinoTimerPickerMode.hm
CupertinoTimerPickerMode.ms

minuteInterval: the difference between two successive minute pickers should be a positive integer factor of 60.

secondInterval: the difference between two successive second pickers should be a positive integer factor of 60,

initialTimerDuration: The time Duration that is displayed when the picker is shown you can initialize it to zero by assigning Duration.zero or assigning it to a duration variable to retain the previous timer.

Note: the initialtimer is a variable of type Duration and is used to retain the previous timer.

CupertinoPicker

This Widget helps us Creates a picker from a concrete list of children. and provides quite a few customizations. and we can add different widgets to our pickers.

(required Arguments)

itemExtent: specifies the height of each Widget child in the picker, must not be null and must be positive

onSelectedItemChanged: An optional callback when the currently centered item changes.Value changes when the item closest to the center changes.

(Optional Arguments)

diameterRatio: Relative ratio between this picker’s height and the simulated cylinder’s diameter. Smaller values create more pronounced curvatures in the scrollable wheel.

backgroundColor: The background color of the picker

magnification: to magnify the size of the widget 1.0 indicates original size,

looping:The looping argument decides whether the child list loops and can be scrolled infinitely. If set to true, scrolling past the end of the list will loop the list back to the beginning. If set to false, the list will stop scrolling when you reach the end or the beginning.

Bleow is the complete source code to the app that we just built

If you have any questions feel free to comment below and if you liked this story and found this helpful don't forget to appreciate by a clap :)

Thanks for taking your time to read.

Happy Fluttering

Mahesh Jamdade

Written by

I Post About Flutter

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade