嘿，我来帮你搞定这个问题！你已经搭好了自定义主题框架，但showDatePicker默认只会继承主题的部分颜色，想要完全匹配你的品牌色，还需要我们针对性配置。下面给你两种实用方案：

方案一：全局统一配置（推荐） #

直接在你的CustomTheme的ThemeData里添加datePickerTheme属性，这样所有页面的日期选择器都会自动套用这个样式，不用每次单独设置。修改你的CustomTheme代码如下：

class CustomTheme extends Theme {
  /*
   * Colors:
   * Primary Blue: #335C81 (51, 92, 129)
   * Light Blue: #74B3CE (116, 179, 206)
   * Yellow: #FCA311 (252, 163, 17)
   * Red: #E15554 (255, 85, 84)
   * Green: #3BB273 (59, 178, 115)
   */
  static int _fullAlpha = 255;
  static Color blueDark = Color.fromARGB(_fullAlpha, 51, 92, 129);
  static Color blueLight = Color.fromARGB(_fullAlpha, 116, 179, 206);
  static Color yellow = Color.fromARGB(_fullAlpha, 252, 163, 17);
  static Color red = Color.fromARGB(_fullAlpha, 255, 85, 84);
  static Color green = Color.fromARGB(_fullAlpha, 59, 178, 115);
  static Color activeIconColor = yellow;

  CustomTheme(Widget child) : super(
    child: child,
    data: ThemeData(
      primaryColor: blueDark,
      accentColor: yellow,
      cardColor: blueLight,
      backgroundColor: blueDark,
      highlightColor: red,
      splashColor: green,
      // 新增：日期选择器专属主题配置
      datePickerTheme: DatePickerThemeData(
        backgroundColor: blueDark, // 选择器整体背景色
        headerBackgroundColor: blueLight, // 顶部年月切换栏背景色
        todayBackgroundColor: MaterialStateProperty.all(yellow), // 今日日期的标记背景
        selectedDayBackgroundColor: MaterialStateProperty.all(blueDark), // 选中日期的背景色
        selectedDayForegroundColor: MaterialStateProperty.all(Colors.white), // 选中日期的文字颜色
        dayForegroundColor: MaterialStateProperty.all(Colors.white), // 普通日期的文字颜色
        cancelButtonStyle: TextButton.styleFrom(foregroundColor: red), // 取消按钮文字颜色
        confirmButtonStyle: TextButton.styleFrom(foregroundColor: green), // 确认按钮文字颜色
        headerForegroundColor: Colors.white, // 顶部年月文字/图标颜色
      ),
    ),
  );
}

每个属性对应的区域我都加了注释，你可以根据视觉需求灵活调整。

方案二：单独配置某一个日期选择器 #

如果只想给特定页面的日期选择器自定义颜色，不想影响全局样式，可以在调用showDatePicker时用builder参数临时覆盖主题：

// 调用showDatePicker的业务代码里
final pickedDate = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
  builder: (context, child) {
    return Theme(
      data: Theme.of(context).copyWith(
        datePickerTheme: DatePickerThemeData(
          backgroundColor: CustomTheme.blueDark,
          headerBackgroundColor: CustomTheme.blueLight,
          selectedDayBackgroundColor: MaterialStateProperty.all(CustomTheme.yellow),
          // 这里只需要写你要修改的属性，其余会自动继承全局主题
        ),
      ),
      child: child!,
    );
  },
);

小提醒 #

• DatePickerThemeData是Flutter 2.0及以上版本的API，如果你的项目是旧版本，可以尝试通过配置ThemeData的colorScheme间接控制颜色：

  colorScheme: ColorScheme.light(
    primary: blueDark,
    onPrimary: Colors.white,
    secondary: yellow,
  ),
  

• iOS和Android的日期选择器原生样式有差异，部分属性可能只在特定平台生效，建议在两个平台都测试下最终效果。

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