If you are new to flutter then you would like to know about Cupertino. so I am introducing some summary of Cupertino.
Cupertino is a package that has all ios widgets. This package is designed for apps that run in iOS style and to make beautiful and high-fidelity widgets for the current iOS design.
- Cupertino widgets respect platform differences and hence don’t support all features of Material widgets.
- Using the Cupertino widgets is optional even when you’re building apps for only iOS devices.
- Only some Cupertino widgets will work in a MaterialApp()/ Scaffold().
In this blog, we will explore the Cupertino Picker In the Flutter and its types. We will see how to implement a Cupertino Picker demo program and show how to create it in your flutter applications.
Table Contents:
![](https://i0.wp.com/flutterexperts.com/wp-content/uploads/2024/04/giphy-9.gif?resize=480%2C310&ssl=1)
Cupertino Picker:
Cupertino Picker is a simple dialog to show a list of items. Displays its children widgets on a wheel for selection and calls back when the currently selected item changes.
Domo module:
![](https://i0.wp.com/cdn-images-1.medium.com/max/640/1*whgJmzMt1HPyj7kIW_Li5w.gif?w=696&ssl=1)
Cupertino Picker Types:
There are several modes of the picker listed here.
- > Cupertino Picker
- > Cupertino DatePicker
- > Cupertino TimePicker
Code Implementation:
Let’s see How to implement the code
First I have created a screen with 3 buttons to show. Cupertino Picker, Cupertino DatePicker, and Cupertino TimePicker. Below is the code snippet.
Column(
children: [
Container(
height: 50,
width:MediaQuery.of(context).size.width ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.pinkAccent
),
child: Center(
child: Text("Cupertino Picker",
style: TextStyle(
color: Colors.white
),),
),
),
Container(
padding: EdgeInsets.only(top: 8,bottom: 8),
child: Text("Set Picker",
//textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black, ),),
),
],
),
), child: Column(
children: [
Container(
height: 50,
width:MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.blue
),
child: Center(
child: Text("Cupertino DatePicker",
style: TextStyle(
color: Colors.white
),),
),
),
Container(
padding: EdgeInsets.only(top: 8,bottom: 8),
child: Text("Set DatePicker",
style: TextStyle(
color: Colors.black
),),
),
],
),
), child: Column(
children: [
Container(
height: 50,
width:MediaQuery.of(context).size.width ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.orange
),
child: Center(
child: Text("Cupertino TimePicker",
style: TextStyle(
color: Colors.white
),),
),
),
Container(
padding: EdgeInsets.only(top: 8,bottom: 8),
child: Text("Set TimePicker",
style: TextStyle(
color: Colors.black
),),
),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
![](https://i0.wp.com/flutterexperts.com/wp-content/uploads/2024/04/image-186.png?resize=640%2C742&ssl=1)
After that, I have created a method. In this method, I am fixing a container with height in the bottom and take a child widget SafeArea in which I am showing all the pickers. Below is the code snippet.
Widget _buildBottomPicker(Widget picker) {
return Container(
height: _kPickerSheetHeight,
padding: const EdgeInsets.only(top: 6.0),
color: CupertinoColors.white,
child: DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 22.0,
),
child: GestureDetector(
// Blocks taps from propagating to the modal sheet and popping.
onTap: () {},
child: SafeArea(
top: false,
child: picker,
),
),
),
);
}
This first button is for the Cupertino picker. To click on this button I am open a Cupertino picker with the list of text items and set it on textview which I am selecting the item.
InkWell(
onTap: (){
showCupertinoModalPopup<void>(
context: context, builder: (BuildContext context){
return _buildBottomPicker(
_buildCupertinoPicker()
);
});
},
child: Column(
children: [
Container(
height: 50,
width:MediaQuery.of(context).size.width ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.pinkAccent
),
child: Center(
child: Text("Cupertino Picker",
style: TextStyle(
color: Colors.white
),),
),
),
// SizedBox(height: 30,),
Container(
padding: EdgeInsets.only(top: 8,bottom: 8),
child: Text("$selectItem",style: TextStyle(
color: Colors.black,),),
),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
![](https://i0.wp.com/flutterexperts.com/wp-content/uploads/2024/04/image-185.png?resize=640%2C742&ssl=1)
This second button is for the Cupertino Date picker. To click on this button I am showing a Cupertino Date picker with the list of dates and set it on textview which I am selecting the date.
InkWell(
onTap: (){
showCupertinoModalPopup<void>(
context: context, builder: (BuildContext context){
return _buildBottomPicker(
_buildDateTimePicker()
);
});
},
child: Column(
children: [
Container(
height: 50,
width:MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.blue
),
child: Center(
child: Text("Cupertino Date Picker",
style: TextStyle(
color: Colors.white
),),
),
),
Container(
padding: EdgeInsets.only(top: 8,bottom: 8),
child: Text("$dateTime",
style: TextStyle(
color: Colors.black
),),
),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
![](https://i0.wp.com/flutterexperts.com/wp-content/uploads/2024/04/image-187.png?resize=640%2C742&ssl=1)
This third button is for the Cupertino Time picker. To click on this button I am showing a Cupertino Time picker with the list of times and set it on textview which I am selecting the time.
InkWell(
onTap: (){
showCupertinoModalPopup<void>(
context: context, builder: (BuildContext context){
return _buildBottomPicker(
timePicker()
);
});
},
child: Column(
children: [
Container(
height: 50,
width:MediaQuery.of(context).size.width ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.orange
),
child: Center(
child: Text("Cupertino Time Picker",
style: TextStyle(
color: Colors.white
),),
),
),
Container(
padding: EdgeInsets.only(top: 8,bottom: 8),
child: Text("$time",
style: TextStyle(
color: Colors.black
),),
),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
![](https://i0.wp.com/flutterexperts.com/wp-content/uploads/2024/04/image-188.png?resize=640%2C742&ssl=1)
Conclusion:
In this article, I have explained the basic overview of the Cupertino Picker Widget in a flutter, you can modify this code according to your choice. This was a small introduction to Cupertino Picker Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Explore, Cupertino Picker Widget in your flutter projects.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Flutter Cupertino Picker Demo:
GitHub – flutter-devs/cupertino_picker_demo_app
Contribute to flutter-devs/cupertino_picker_demo_app development by creating an account on GitHub.github.com
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
![](https://i0.wp.com/flutterexperts.com/wp-content/uploads/2024/04/image-184.png?resize=696%2C278&ssl=1)