如何去除 showDatePicker() 和 showTimePicker() 中的灰色背景答案

【问题标题】：How to remove gray background in showDatePicker() and showTimePicker()如何去除 showDatePicker() 和 showTimePicker() 中的灰色背景
【发布时间】：2021-11-21 08:18:20
【问题描述】：

我有一个向用户询问日期和时间的功能。它看起来像这样：

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;
}

showDatePicker() 和 showTimePicker() 都具有您在 showDialog() 中常见的灰色背景。

在showDialog()，我可以添加barrierColor: Colors.transparent，但是showDatePicker和showTimePicker()没有这个属性。

如何去除这个灰色背景？

【问题讨论】：

标签： flutter dart

【解决方案1】：

您覆盖ThemeData 或使用builder 的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!,
        );
      },
    );

您可以查看this 来自定义日期选择器。

【讨论】：