Shows a dialog containing a Material Design date picker. The returned Future
resolves to the date selected by the user when the user confirms the dialog. If the user cancels the dialog, null
is returned.
When the date picker is first displayed, it will show the month of initialDate
, with initialDate
selected.
The firstDate
is the earliest allowable date. The lastDate
is the latest allowable date. initialDate
must either fall between these dates, or be equal to one of them. For each of these DateTime
parameters, only their dates are considered. Their time fields are ignored. They must all be non-null.
An optional selectableDayPredicate
function can be passed in to only allow certain days for selection. If provided, only the days that selectableDayPredicate
returns true
for will be selectable. For example, this can be used to only allow weekdays for selection. If provided, it must return true
for initialDate
.
Optional strings for the cancelText
, confirmText
, errorFormatText
, errorInvalidText
, fieldHintText
, fieldLabelText
, and helpText
allow you to override the default text used for various parts of the dialog:
cancelText
, label on the cancel button.confirmText
, label on the ok button.errorFormatText
, message used when the input text isn't in a proper date format.errorInvalidText
, message used when the input text isn't a selectable date.fieldHintText
, text used to prompt the user when no text has been entered in the field.fieldLabelText
, label for the date text input field.helpText
, label on the top of the dialog.import 'dart:async'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { DateTime selectedDate = DateTime.now(); Future<Null> _selectDate(BuildContext context) async { final DateTime picked = await showDatePicker( context: context, initialDate: selectedDate, firstDate: DateTime(2015, 8), lastDate: DateTime(2101) ); if (picked != null && picked != selectedDate) setState(() { selectedDate = picked; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Text("${selectedDate.toLocal()}".split(' ')[0]), SizedBox(height: 20.0,), RaisedButton( onPressed: () => _selectDate(context), child: Text('Select date'), ), ], ), ), ); } }
Shows a dialog containing a material design time picker.
The returned Future
resolves to the time selected by the user when the user closes the dialog. If the user cancels the dialog, null
is returned.
The initialTime
parameter can be used to provide a initial time that will be selected when the time picker is opened.
The builder
parameter can be used to wrap the dialog widget to add inherited widgets like Localizations.override
, Directionality
, or MediaQuery
.
Future<TimeOfDay> selectedTime = showTimePicker( initialTime: TimeOfDay.now(), context: context, );
Future<Null> _selectTime(BuildContext context) async { TimeOfDay selectedTime =TimeOfDay.now(); final TimeOfDay picked_s = await showTimePicker( context: context, initialTime: selectedTime, builder: (BuildContext context, Widget child) { return MediaQuery( data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false), child: child, ); }, ); if (picked_s != null && picked_s != selectedTime ) setState(() { selectedTime = picked_s; }); }