CupertinoDatePicker class

A date picker widget in iOS style.

There are several modes of the date picker listed in CupertinoDatePickerMode.

The class will display its children as consecutive columns. Its children order is based on internationalization, or the dateOrder property if specified.

Example of the picker in date mode:

  • US-English: | July | 13 | 2012 |
  • Vietnamese: | 13 | Th├íng 7 | 2012 |

Can be used with showCupertinoModalPopup to display the picker modally at the bottom of the screen.

Sizes itself to its parent and may not render correctly if not given the full screen width. Content texts are shown with CupertinoTextThemeData.dateTimePickerTextStyle.

This sample shows how to implement CupertinoDatePicker with different picker modes. We can provide initial dateTime value for the picker to display. When user changes the drag the date or time wheels, the picker will call onDateTimeChanged callback.

CupertinoDatePicker can be displayed directly on a screen or in a popup.


To create a local project with this code sample, run:
flutter create --sample=cupertino.CupertinoDatePicker.1 mysample

See also:



CupertinoDatePicker({Key? key, CupertinoDatePickerMode mode = CupertinoDatePickerMode.dateAndTime, required ValueChanged<DateTime> onDateTimeChanged, DateTime? initialDateTime, DateTime? minimumDate, DateTime? maximumDate, int minimumYear = 1, int? maximumYear, int minuteInterval = 1, bool use24hFormat = false, DatePickerDateOrder? dateOrder, Color? backgroundColor, bool showDayOfWeek = false, double itemExtent = _kItemExtent})
Constructs an iOS style date picker.


backgroundColor Color?
Background color of date picker.
dateOrder DatePickerDateOrder?
Determines the order of the columns inside CupertinoDatePicker in and CupertinoDatePickerMode.monthYear mode. When using monthYear mode, both DatePickerDateOrder.dmy and DatePickerDateOrder.mdy will result in the month|year order. Defaults to the locale's default date format/order.
hashCode int
The hash code for this object.
no setterinherited
initialDateTime DateTime
The initial date and/or time of the picker. Defaults to the present date and time. The present must conform to the intervals set in minimumDate, maximumDate, minimumYear, and maximumYear.
itemExtent double
The uniform height of all children.
key Key?
Controls how one widget replaces another widget in the tree.
maximumDate DateTime?
The maximum selectable date that the picker can settle on.
maximumYear int?
Maximum year that the picker can be scrolled to in mode. Null if there's no limit.
minimumDate DateTime?
The minimum selectable date that the picker can settle on.
minimumYear int
Minimum year that the picker can be scrolled to in mode. Defaults to 1.
minuteInterval int
The granularity of the minutes spinner, if it is shown in the current mode. Must be an integer factor of 60.
mode CupertinoDatePickerMode
The mode of the date picker as one of CupertinoDatePickerMode. Defaults to CupertinoDatePickerMode.dateAndTime. Value cannot change after initial build.
onDateTimeChanged ValueChanged<DateTime>
Callback called when the selected date and/or time changes. If the new selected DateTime is not valid, or is not in the minimumDate through maximumDate range, this callback will not be called.
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
showDayOfWeek bool
Whether to show day of week alongside day. Defaults to false.
use24hFormat bool
Whether to use 24 hour format. Defaults to false.


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
createState() State<StatefulWidget>
Creates the mutable state for this widget at a given location in the tree.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel =}) String
A string representation of this object.
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator.