Flutter 3.16.5中showDatePicker年份区域边框无法自定义求助

问题说明 #

使用Flutter 3.16.5版本时，showDatePicker的年份区域上下边框无法通过常规的dividerColor等主题参数修改，现有Theme配置对该边框无响应，需求为修改该边框颜色或直接移除。

解决方案 #

在Flutter 3.16版本中，年份选择器的边框样式由DatePickerThemeData下的yearPickerTheme子主题单独控制，而非顶层的dividerColor参数，因此需要针对性配置：

1. 修改边框颜色

在DatePickerThemeData中添加yearPickerTheme，设置dividerColor为目标颜色即可：

showDatePicker(
    builder: (BuildContext context, Widget? child) {
      return Theme(
        data: Theme.of(context).copyWith(
          inputDecorationTheme: InputDecorationTheme(
              border: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 0.5,
              color: ColorRes.colorPrimary,
            ),
          )),
          colorScheme: ColorScheme.light(
              onPrimary: ColorRes.white,
              primary: ColorRes.colorPrimary,
              background: ColorRes.white),
          datePickerTheme: DatePickerThemeData(
            headerBackgroundColor: ColorRes.colorPrimary,
            backgroundColor: ColorRes.white,
            headerForegroundColor: ColorRes.white,
            surfaceTintColor: ColorRes.white,
            dividerColor: ColorRes.colorPrimary, // 控制日期选择器其他分割线
            // 新增年份选择器主题配置
            yearPickerTheme: YearPickerThemeData(
              dividerColor: ColorRes.colorPrimary, // 控制年份区域的上下边框颜色
            ),
          ),
        ),
        child: child!,
      );
    },
    locale: currentDefaultSystemLocale == "nl_NL"
        ? Locale("nl", "NL")
        : Locale("en", "US"),
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime.now(),
    lastDate: DateTime.now().add(const Duration(days: 183)))

2. 移除边框

若要直接移除边框，只需将yearPickerTheme中的dividerColor设置为透明色：

yearPickerTheme: YearPickerThemeData(
  dividerColor: Colors.transparent,
),

补充说明 #

Flutter 3.16对日期选择器的主题做了细分，年份选择器的样式被抽离到YearPickerThemeData中，因此顶层DatePickerThemeData的dividerColor仅作用于日期选择区域的分割线，无法影响年份区域边框。

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