Date and Time Pickers in Flutter: showDatePicker and showTimePicker

Flutter ships ready-made pickers for dates and times. This follows the cited widget catalog: showDatePicker returns a Future<DateTime?>, and showTimePicker returns a Future<TimeOfDay?> — both are async because they open a modal route.

Picking a date

Future<void> _pickDate(BuildContext context) async {
  final now = DateTime.now();
  final picked = await showDatePicker(
    context: context,
    initialDate: now,
    firstDate: DateTime(2020),
    lastDate: DateTime(2035),
  );
  if (picked != null) {
    setState(() => _date = picked);
  }
}

firstDate and lastDate are required and define the selectable range. The dialog returns null when the user cancels, so always null-check.

Picking a time

Future<void> _pickTime(BuildContext context) async {
  final picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (picked != null) {
    setState(() => _time = picked);
  }
}

Combining date and time

Merge the two results into a single DateTime:

DateTime _combine(DateTime date, TimeOfDay time) {
  return DateTime(date.year, date.month, date.day, time.hour, time.minute);
}

Restricting dates

Use selectableDayPredicate to block weekends, past dates, or blackout days:

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime.now(),
  lastDate: DateTime(2035),
  selectableDayPredicate: (day) => day.weekday != DateTime.sunday,
)

Theming

Both pickers follow the app theme. Set datePickerTheme and timePickerTheme in ThemeData for consistent styling across the app:

ThemeData(
  datePickerTheme: DatePickerThemeData(
    backgroundColor: Colors.white,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  ),
)

Takeaway: showDatePicker and showTimePicker are async dialogs that return null on cancel — constrain the range with firstDate/lastDate, filter days with selectableDayPredicate, and theme them globally with datePickerTheme and timePickerTheme.