Flutter中DatePicker颜色修改问题：白色标题设置后按钮不可见如何解决？

你当前通过修改ColorScheme.light的primary为白色来设置标题背景，这种全局修改会导致依赖关联颜色的组件样式异常（比如按钮因颜色冲突不可见）。可以通过以下两种方式解决：

方法一：精准定制DatePicker标题栏样式 #

直接针对DatePicker的AppBar部分单独设置背景色，不干扰全局Theme的颜色配置：

builder: (context, child) {
  return Theme(
    data: Theme.of(context).copyWith(
      // 单独定制DatePicker的AppBar样式
      appBarTheme: const AppBarTheme(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black, // 标题文字和返回按钮的颜色
      ),
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          foregroundColor: Colors.black, // 确认/取消按钮的文字颜色
        ),
      ),
    ),
    child: child!,
  );
},

方法二：补全ColorScheme关联属性（若坚持全局修改） #

如果一定要通过修改ColorScheme实现，需要补全所有相关颜色属性，避免组件样式冲突：

builder: (context, child) {
  return Theme(
    data: Theme.of(context).copyWith(
      colorScheme: const ColorScheme.light(
        primary: Colors.white, // 标题背景色
        onPrimary: Colors.black, // 标题文字、返回按钮的颜色
        onSurface: Colors.black, // 按钮等表面组件的默认文字颜色
      ),
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          foregroundColor: Colors.black, // 显式指定按钮文字颜色
        ),
      ),
    ),
    child: child!,
  );
},

原因说明 #

DatePicker的标题栏属于AppBar组件，其背景色默认使用ColorScheme.primary，而按钮的文字颜色可能依赖onSurface属性或按钮的显式样式。你之前仅设置了primary和onPrimary，未覆盖onSurface这类关联属性，导致按钮颜色与背景冲突不可见。通过精准定制AppBar样式或补全ColorScheme的相关属性，就能同时满足标题白色背景和按钮可见的需求。

内容的提问来源于stack exchange，提问作者K.k