如何移除Flutter中showDatePicker与showTimePicker的灰色背景

核心逻辑：showDatePicker和showTimePicker的遮罩颜色继承自主题配置中的dialogTheme.barrierColor，通过自定义主题覆盖即可实现透明遮罩，不需要修改组件源码。

• 方案1：仅给当前日期/时间选择器设置透明遮罩（不影响其他弹窗的遮罩效果）
  直接在两个选择器的调用中新增builder参数，注入自定义主题配置即可，修改后的代码如下：

Future<DateTime?> getDate(BuildContext context) async {
  DateTime? date = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(1950),
    lastDate: DateTime(2100),
    // 新增builder覆盖主题
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          dialogTheme: const DialogTheme(
            barrierColor: Colors.transparent,
          ),
        ),
        child: child!,
      );
    },
  );

  if (date == null) return null;

  TimeOfDay? time = await showTimePicker(
    context: context,
    initialEntryMode: TimePickerEntryMode.input,
    initialTime: TimeOfDay.now(),
    // 时间选择器同样新增builder配置
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          dialogTheme: const DialogTheme(
            barrierColor: Colors.transparent,
          ),
        ),
        child: child!,
      );
    },
  );
  DateTime? dateAndTime = date.add(Duration(
    hours: time?.hour ?? 0,
    minutes: time?.minute ?? 0,
  ));

  return dateAndTime;
}

• 方案2：全局所有弹窗都使用透明遮罩
  如果项目中所有Dialog、日期选择器、时间选择器都不需要灰色遮罩，可以直接在全局主题中统一配置：

MaterialApp(
  theme: ThemeData(
    dialogTheme: const DialogTheme(
      barrierColor: Colors.transparent,
    ),
    // 其余全局主题配置
  ),
  // 其余MaterialApp配置
)

内容的提问来源于stack exchange，提问作者BookShell527