Flutter中showDateRangePicker颜色/主题设置不生效问题求助

你尝试通过Theme修改showDateRangePicker的颜色，但设置后未正常生效，当前使用Flutter 3.13.3版本，代码及当前效果如下：

var pickedDate = await showDateRangePicker(
                  context: context,
                  initialDateRange: DateTimeRange(
                      start: widget.selectedDate!, end: widget.selectedDate!),
                  firstDate: DateTime.now().subtract(Duration(days: 0)),
                  lastDate: DateTime(2100),
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData.light().copyWith(
                        colorScheme: ColorScheme.fromSwatch(
                          primarySwatch: Colors.teal,
                          accentColor: Colors.teal,
                        ),
                        dialogBackgroundColor:Colors.white,
                      ),
                      child: child!,
                    );
                  },
                );

当前效果：

问题原因 #

在Flutter 3.x版本中，showDateRangePicker的样式控制不再仅依赖primarySwatch和accentColor，默认样式更多绑定ColorScheme的核心属性，且部分组件需要通过专门的DatePickerThemeData来精确配置，仅设置基础ThemeData属性无法覆盖所有样式。

修改后的代码 #

var pickedDate = await showDateRangePicker(
  context: context,
  initialDateRange: DateTimeRange(
      start: widget.selectedDate!, end: widget.selectedDate!),
  firstDate: DateTime.now(),
  lastDate: DateTime(2100),
  builder: (BuildContext context, Widget? child) {
    return Theme(
      data: ThemeData.light().copyWith(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.teal,
          backgroundColor: Colors.white,
        ).copyWith(
          primary: Colors.teal,
          onPrimary: Colors.white,
          secondary: Colors.teal.shade300,
        ),
        dialogBackgroundColor: Colors.white,
        datePickerTheme: DatePickerThemeData(
          headerBackgroundColor: Colors.teal,
          headerForegroundColor: Colors.white,
          dayOverlayColor: MaterialStateProperty.all(Colors.teal.withOpacity(0.2)),
          selectedDayBackgroundColor: MaterialStateProperty.all(Colors.teal),
          selectedDayForegroundColor: MaterialStateProperty.all(Colors.white),
          rangeSelectionBackgroundColor: Colors.teal.withOpacity(0.2),
        ),
      ),
      child: child!,
    );
  },
);

关键修改点说明 #

• 完善ColorScheme：通过copyWith补充primary、onPrimary等核心属性，确保主题色能渗透到组件的各个交互状态
• 添加DatePickerThemeData：直接针对日期选择器的特定元素设置样式：
  • headerBackgroundColor：控制顶部标题栏背景色
  • selectedDayBackgroundColor：控制选中单个日期的背景色
  • rangeSelectionBackgroundColor：控制日期范围选中区域的背景色
  • dayOverlayColor：控制日期 hover 时的半透明覆盖色

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