Flutter中showDatePicker文字（含未选中年份）显示白色的解决方法

问题原因 #

未选中的年份等文本呈现白色，核心原因是主题配置中控制常规文本颜色的参数未正确设置，导致文本与白色背景冲突，无法清晰显示。

优化后的解决方案 #

无需过度修改主题的全部属性，仅针对关键颜色字段调整即可，以下是精简且有效的实现代码：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime.now(),
  builder: (BuildContext context, Widget? child) {
    return Theme(
      data: Theme.of(context).copyWith(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue, // 选中日期的背景色
          onPrimary: Colors.white, // 选中日期的文字颜色
          onSurface: Colors.black, // 未选中日期/年份的文字颜色
        ),
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            foregroundColor: Colors.black, // 确认/取消按钮文字颜色
          ),
        ),
      ),
      child: child ?? const Text(""),
    );
  },
);

关键配置说明 #

• colorScheme.onSurface：这是控制日期选择器内未选中日期、年份等常规文本颜色的核心参数，设置为Colors.black即可解决白色文字的问题。
• Theme.of(context).copyWith：基于当前主题进行局部修改，避免完全替换原有主题，保证应用整体风格的一致性。
• textButtonTheme：单独配置底部操作按钮的文字颜色，确保确认、取消按钮的文字正常显示。

原有配置的问题分析 #

你之前的代码中虽设置了onSurface: Colors.black，但同时错误地将surface: Colors.black设为黑色，导致日期选择器的背景变为黑色，反而可能引发其他显示异常。此外，过度配置TextTheme的subtitle1等字段，不如直接通过ColorScheme的对应字段控制更精准。

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