Cupertino Picker In Flutter
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:
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:
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.
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.
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.
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.
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.
