DatePicker高亮区域组件名称及ThemeData自定义文本颜色方法

你当前的ThemeData配置缺少Material3 DatePicker的专属主题设置，高亮（选中/悬停）日期的文本颜色需要通过DatePickerThemeData来配置，具体修改如下：

修改后的完整ThemeData代码 #

static final ThemeData lightTheme = ThemeData(
  textSelectionTheme: const TextSelectionThemeData(
    cursorColor: AppColors.whiteColor,
    selectionColor: AppColors.scaffoldColor,
    selectionHandleColor: AppColors.activeColor,
  ),
  scaffoldBackgroundColor: AppColors.scaffoldColor,
  useMaterial3: true,
  // 新增DatePicker主题配置
  datePickerTheme: DatePickerThemeData(
    // 设置**选中日期**的文本颜色为白色
    selectedDayTextStyle: const TextStyle(color: AppColors.whiteColor),
    // 可选：设置选中日期的背景色（根据你的配色需求调整）
    selectedBackgroundColor: AppColors.activeColor,
    // 如果需要修改**悬停/聚焦状态下的未选中日期**文本颜色，用以下配置
    dayTextStyle: MaterialStateTextStyle.resolveWith((states) {
      if (states.contains(MaterialState.hovered) || states.contains(MaterialState.focused)) {
        return const TextStyle(color: AppColors.whiteColor);
      }
      // 默认未选中日期的文本颜色，可根据需求调整
      return const TextStyle(color: Colors.black87);
    }),
  ),
  appBarTheme: const AppBarTheme(
    backgroundColor: AppColors.scaffoldColor,
    elevation: 0,
    iconTheme: IconThemeData(color: AppColors.whiteColor),
  ),
  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
    backgroundColor: AppColors.scaffoldColor,
    elevation: 0,
    selectedItemColor: AppColors.activeColor,
    unselectedItemColor: AppColors.inactiveColor,
    type: BottomNavigationBarType.shifting,
  ),
);

关键配置说明 #

• selectedDayTextStyle：专门控制选中日期的文本样式，直接指定color为AppColors.whiteColor即可实现选中日期文本变白。
• dayTextStyle结合MaterialStateTextStyle.resolveWith：用于处理悬停、聚焦等非选中状态下的高亮日期文本颜色，根据状态返回对应样式。

内容的提问来源于stack exchange，提问作者Mehmet Güler