Cupertino Picker Flutter Example
In this article, we are going to integrate Cupertino Picker, Cupertino DateTimePicker, Cupertino Time Picker in flutter application. You can also check out flutter cupertino widgets related articles.
Cupertino widget is used to design application UI in iOS style. Using cupertino picker, we can simple select single item from list. In this flutter example, we are displaying football club names in cupertino picker dialog. We are also implementing cupertino date-time picker and time picker in our flutter apps.
Flutter Cupertino Picker UI
Widget widgetCupertinoPickerUI(Widget picker) {
return Container(
padding: const EdgeInsets.only(top: 7),
color: CupertinoColors.white,
height: cupertinoPickerHeight,
child: DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 20,
),
child: GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
child: SafeArea(
top: false,
child: picker,
),
onTap: () {},
),
),
);
}
Select Item from Picker
“Liverpool”,
“Manchester City”,
“Manchester United”,
“Chelsea”,
“Arsenal”,
];
String selectedItem;
int selectedItemPosition = 0;
Widget widgetCupertinoPicker() {
return Container(
child: CupertinoPicker(
backgroundColor: Colors.white,
itemExtent: 50,
looping: true,
magnification: 1.5,
children: listFootballClubs
.map((item) => Center(
child: Text(
item,
style: TextStyle(fontSize: 30),
),
))
.toList(),
onSelectedItemChanged: (index) {
setState(() => this.selectedItemPosition = index);
selectedItem = listFootballClubs[index];
print(“Selected Item: $index”);
// setState(() {
// selectItem=value.toString();
// });
},
),
);
}
Select Date Time from Picker
Widget widgetCupertinoDateTimePicker() {
return CupertinoDatePicker(
initialDateTime: dateTime,
mode: CupertinoDatePickerMode.dateAndTime,
onDateTimeChanged: (DateTime changedDateTime) {
if (mounted) {
setState(() {
dateTime = changedDateTime;
});
}
});
}
Select Time from Picker
String time;
Widget widgetCupertinoTimePicker() {
return CupertinoTimerPicker(
minuteInterval: 1,
secondInterval: 1,
initialTimerDuration: initialTimerDuration,
mode: CupertinoTimerPickerMode.hms,
onTimerDurationChanged: (Duration duration) {
setState(() {
initialTimerDuration = duration;
time = duration.inHours.toString() +
‘ hrs ‘ +
(duration.inMinutes % 60).toString() +
‘ mins ‘ +
(duration.inSeconds % 60).toString() +
‘ secs’;
});
},
);
}
Integrate Flutter Cupertino Picker
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Cupertino Picker Sample’),
),
body: Center(
child: Container(
margin: EdgeInsets.only(left: 25, right: 25),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return widgetCupertinoPickerUI(widgetCupertinoPicker());
});
},
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.deepOrangeAccent),
child: Center(
child: Text(
“Cupertino Picker”,
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
// SizedBox(height: 30,),
Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Text(
selectedItem != null ? selectedItem : ‘No Item is Selected’,
style: TextStyle(
color: Colors.black, fontSize: 20
),
),
),
],
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return widgetCupertinoPickerUI(widgetCupertinoDateTimePicker());
});
},
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.orangeAccent),
child: Center(
child: Text(
“Cupertino Date Picker”,
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
// selectItem!=null?selectItem:’Set Picker’,
child: Text(
dateTime == null ? ‘No Date is Selected’ : ‘ ${dateTime}’,
style: TextStyle(color: Colors.black, fontSize: 20),
),
),
],
),
),
SizedBox(
height: 25,
),
InkWell(
onTap: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return widgetCupertinoPickerUI(widgetCupertinoTimePicker());
});
},
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.pinkAccent),
child: Center(
child: Text(
“Cupertino Time Picker”,
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
),
Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: Text(
time == null ? ‘No Time is Selected’ : ‘ ${time}’,
style: TextStyle(color: Colors.black, fontSize: 20),
),
),
],
),
),
],
),
),
));
}
