Flutter is a famous, cross-platform framework that is used widely to develop Android and iOS apps. For this purpose, Flutter houses a variety of built-in Cupertino widgets that are used explicitly in iOS applications. One of these widgets is the CupertinoDatePicker.
CupertinoDatePicker widget?As the name suggests, the CupertinoDatePicker widget is a sleek and intuitive way of selecting dates in your iOS apps. It follows the guidelines of iOS and seamlessly integrates into your Flutter app, just like a normal widget.
The CupertinoDatePicker widget is part of the cupertino package in Flutter, which provides Cupertino-style widgets that closely resemble the native iOS widgets. It offers various customization options and modes to adapt to different use cases.
The key properties of the CupertinoDatePicker include:
mode: Defines the mode of the date picker, such as CupertinoDatePickerMode.date, CupertinoDatePickerMode.time, or CupertinoDatePickerMode.dateAndTime.
initialDateTime: Sets the initial date and time to display when the picker is opened.
minimumDate and maximumDate: Optionally define a range of selectable dates.
minimumYear and maximumYear: Optionally limit the range of selectable years.
minuteInterval: Specifies the interval between minutes shown in the picker.
onDateTimeChanged: A
CupertinoDatePicker to your appBy following through some simple steps, you can easily integrate this widget into your Flutter app.
As the Cupertino widgets come preinstalled in the latest Flutter versions, you can easily import the necessary packages into the dart file in which you want to use the widget.
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart' show showCupertinoModalPopup;
The showCupertinoModalPopup function is a utility function provided by Flutter that displays a modal popup with a Cupertino-style transition. It is typically used in conjunction with the CupertinoAlertDialog or other Cupertino-style widgets to create modal dialogs that conform to the iOS design guidelines.
The CupertinodatePicker widget can be initialized in the following manner:
DateTime _selectedDate = DateTime.now();CupertinoDatePicker(mode: CupertinoDatePickerMode.date,initialDateTime: _selectedDate,onDateTimeChanged: (DateTime newDate) {setState(() {_selectedDate = newDate;});},),
Here, we are initializing a variable, _selectedDate which will store the value returned by the widget, and can be used anywhere on the page to display it.
Within the widget, we are initializing all the properties according to our preference and using a setState function to update the value of _selectedDate variable accordingly.
build() methodIn the build method of the state class, we'll create a CupertinoButton widget that will open the DatePicker when pressed:
Widget build(BuildContext context) {return CupertinoButton(child: Padding(padding: EdgeInsets.only(bottom:200,left:30),child:Text('Open DatePicker'),),onPressed: () {showCupertinoModalPopup<void>(context: context,builder: (BuildContext context) {return _buildCupertinoDatePicker();},);},);}
Within the build method, a CupertinoButton widget is returned. It is a button widget that follows the Cupertino style, resembling the buttons typically found in iOS apps.
The CupertinoButton has two main parameters:
child
onPressed
Inside the onPressed callback, the showCupertinoModalPopup function is called. We pass the context of our page to the builder and call the _buildCupertinoDatePicker() function.
In the end, your app should look something like this.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart' show showCupertinoModalPopup;
void main() {
runApp(MyApp());
}
class CupertinoDatePickerExample extends StatefulWidget {
@override
_CupertinoDatePickerExampleState createState() =>
_CupertinoDatePickerExampleState();
}
class _CupertinoDatePickerExampleState extends State<CupertinoDatePickerExample> {
DateTime _selectedDate = DateTime.now();
@override
Widget build(BuildContext context) {
return CupertinoButton(
child: Padding(
padding: EdgeInsets.only(bottom:200,left:30),
child:Text('Open DatePicker'),),
onPressed: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildCupertinoDatePicker();
},
);
},
);
}
Widget _buildCupertinoDatePicker() {
return Container(
height: 200,
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date,
initialDateTime: _selectedDate,
onDateTimeChanged: (DateTime newDate) {
setState(() {
_selectedDate = newDate;
});
},
),
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
child: Center(
child: CupertinoDatePickerExample(),
),
),
);
}
}
Free Resources