How to remove gray background in showDatePicker() and showTimePicker()

Question

I have a function that asks the user for date and time. It look like this:

Future<DateTime?> getDate(BuildContext context) async {
  DateTime? date = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(1950),
    lastDate: DateTime(2100),
  );

  if (date == null) return null;

  TimeOfDay? time = await showTimePicker(
    context: context,
    initialEntryMode: TimePickerEntryMode.input,
    initialTime: TimeOfDay.now(),
  );
  DateTime? dateAndTime = date.add(Duration(
    hours: time?.hour ?? 0,
    minutes: time?.minute ?? 0,
  ));

  return dateAndTime;
}

Both showDatePicker() and showTimePicker() have a gray background that you commonly see in showDialog() .

In showDialog() , I can add barrierColor: Colors.transparent , but showDatePicker and showTimePicker() don't have this property.

How can I remove this gray background?

Answer 1

You override the ThemeData or use builder of showTimePicker

 showTimePicker(
      context: context,
      initialEntryMode: TimePickerEntryMode.input,
      initialTime: TimeOfDay.now(),
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
          /// use `colorScheme: ` for more
          // date picker dialogBackground color in simple case
          dialogBackgroundColor: Colors.amber,
            timePickerTheme: TimePickerTheme.of(context).copyWith(
          //background color of time picker              
            backgroundColor: Colors.yellow, 
            ),
          ),
          child: child!,
        );
      },
    );

You can check this to customize a date picker.