Flutter：FormBuilderDateTimePicker头部颜色修改不全及divider处理求助

方案1：修改分隔线颜色消除视觉空白 #

那个空白区域实际是日期选择器头部下方的分隔线区域，直接在DatePickerThemeData中补充设置dividerColor，让它和头部背景色一致，就能消除视觉上的空白感：

datePickerTheme: const DatePickerThemeData(
  headerBackgroundColor: Color(0xFF2296F3),
  headerForegroundColor: Colors.white,
  backgroundColor: Color(0xFFE6F3FD),
  dividerColor: Color(0xFF2296F3), // 分隔线颜色与头部背景统一
),

方案2：移除分隔线 #

如果不需要分隔线，直接将其设为透明即可：

datePickerTheme: const DatePickerThemeData(
  headerBackgroundColor: Color(0xFF2296F3),
  headerForegroundColor: Colors.white,
  backgroundColor: Color(0xFFE6F3FD),
  dividerColor: Colors.transparent, // 隐藏分隔线
),

方案3：自定义Header完全控制样式 #

如果上述方法仍有残留空白，可以通过builder参数自定义日期选择器的弹出逻辑，完全覆盖默认头部样式：

FormBuilderDateTimePicker(
  name: 'date',
  builder: (context, picker, child) {
    return ElevatedButton(
      onPressed: () async {
        final selectedDate = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2000),
          lastDate: DateTime(2100),
          builder: (context, child) {
            return Theme(
              data: Theme.of(context).copyWith(
                datePickerTheme: const DatePickerThemeData(
                  headerBackgroundColor: Color(0xFF2296F3),
                  headerForegroundColor: Colors.white,
                  backgroundColor: Color(0xFFE6F3FD),
                  dividerColor: Colors.transparent,
                ),
                // 调整头部文本样式，配合自定义背景
                textTheme: const TextTheme(
                  headlineSmall: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
              child: child!,
            );
          },
        );
        if (selectedDate != null) picker.didChange(selectedDate);
      },
      child: const Text('选择日期'),
    );
  },
),

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