showRDatePicker function

Future<DateTime> showRDatePicker (
  1. {@required DateTime initialDate,
  2. @required DateTime firstDate,
  3. @required DateTime lastDate,
  4. SelectableDayPredicate selectableDayPredicate,
  5. DatePickerMode initialDatePickerMode:,
  6. Locale locale,
  7. TextDirection textDirection,
  8. TransitionBuilder builder}

Shows a dialog containing a material design date picker.

The returned Future resolves to the date selected by the user when the user closes the dialog. If the user cancels the dialog, null is returned.

An optional selectableDayPredicate function can be passed in to customize the days to enable for selection. If provided, only the days that selectableDayPredicate returned true for will be selectable.

An optional initialDatePickerMode argument can be used to display the date picker initially in the year or month+day picker mode. It defaults to month+day, and must not be null.

An optional locale argument can be used to set the locale for the date picker. It defaults to the ambient locale provided by Localizations.

An optional textDirection argument can be used to set the text direction (RTL or LTR) for the date picker. It defaults to the ambient text direction provided by Directionality. If both locale and textDirection are not null, textDirection overrides the direction chosen for the locale.

The context and useRootNavigator arguments are passed to showDialog, the documentation for which discusses how it is used.

The builder parameter can be used to wrap the dialog widget to add inherited widgets like Theme.

{@tool sample} Show a date picker with the dark theme.

Future<DateTime> selectedDate = showDatePicker(
  context: context,
  firstDate: DateTime(2018),
  lastDate: DateTime(2030),
  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData.dark(),
      child: child,


The context, initialDate, firstDate, and lastDate parameters must not be null.

See also:

  • showTimePicker, which shows a dialog that contains a material design time picker.
  • DayPicker, which displays the days of a given month and allows choosing a day.
  • MonthPicker, which displays a scrollable list of months to allow picking a month.
  • YearPicker, which displays a scrollable list of years to allow picking a year.


Future<DateTime> showRDatePicker({
  @required DateTime initialDate,
  @required DateTime firstDate,
  @required DateTime lastDate,
  SelectableDayPredicate selectableDayPredicate,
  DatePickerMode initialDatePickerMode =,
  Locale locale,
  TextDirection textDirection,
  TransitionBuilder builder,
}) async {
  BuildContext context = RRouter.context;

  assert(initialDate != null);
  assert(firstDate != null);
  assert(lastDate != null);
      'initialDate must be on or after firstDate');
      'initialDate must be on or before lastDate');
      !firstDate.isAfter(lastDate), 'lastDate must be on or after firstDate');
  assert(selectableDayPredicate == null || selectableDayPredicate(initialDate),
      'Provided initialDate must satisfy provided selectableDayPredicate');
      initialDatePickerMode != null, 'initialDatePickerMode must not be null');

  Widget child = _DatePickerDialog(
    initialDate: initialDate,
    firstDate: firstDate,
    lastDate: lastDate,
    selectableDayPredicate: selectableDayPredicate,
    initialDatePickerMode: initialDatePickerMode,

  if (textDirection != null) {
    child = Directionality(
      textDirection: textDirection,
      child: child,

  if (locale != null) {
    child = Localizations.override(
      context: context,
      locale: locale,
      child: child,
  return await showRDialog<DateTime>(
    builder: (BuildContext context) {
      return builder == null ? child : builder(context, child);