Flutter showDatePicker主题颜色不生效问题求助

Flutter 3.24.0默认启用了Material 3设计规范，日期选择器的配色逻辑和旧版本不同——你之前通过ColorScheme.primary设置头部背景的方式已不再适用，需要用DatePickerThemeData针对性配置头部区域颜色。

替换为以下代码即可解决问题：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime.now(),
  lastDate: DateTime.now().add(const Duration(days: 600)),
  builder: (BuildContext? context, Widget? child) {
    return Theme(
      data: ThemeData().copyWith(
        datePickerTheme: DatePickerThemeData(
          headerBackgroundColor: Colors.green, // 顶部头部背景色
          headerForegroundColor: Colors.white, // 头部文字、图标颜色
          selectionBackgroundColor: Colors.green, // 选中日期的背景色
        ),
        dialogBackgroundColor: Colors.white, // 对话框整体背景
      ),
      child: child ?? const SizedBox.shrink(),
    );
  },
);

关键参数说明 #

• headerBackgroundColor：专门控制日期选择器顶部区域的背景色，对应你要修改的目标区域
• headerForegroundColor：控制头部内月份、年份文字及箭头图标的颜色
• selectionBackgroundColor：替代原ColorScheme.surface，负责选中日期的背景色

如果想强制使用Material 2样式，可在ThemeData中添加useMaterial3: false，但更推荐适配Material 3的专属配置，避免后续版本兼容问题。

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