Flutter中showDatePicker()年份选择器样式异常无法显示求助

问题根源分析 #

你的代码中firstDate和lastDate默认都设置为DateTime.now()，这会导致可选年份范围被限制在当前年份，极端的范围会触发日期选择器的UI渲染异常，直接表现为年份选择模式空白、选中年份无法显示。

修复方案 #

1. 调整可选日期范围
   给firstDate和lastDate设置合理的年份跨度，避免两者为同一天：

   final datePicked = await showDatePicker(
     context: context,
     initialDate: _dDate,
     firstDate: widget.firstDate ?? DateTime.now().subtract(const Duration(days: 365 * 20)), // 往前覆盖20年
     lastDate: widget.lastDate ?? DateTime.now().add(const Duration(days: 365 * 20)), // 往后覆盖20年
     initialDatePickerMode: widget.initialDatePickerMode ?? DatePickerMode.day,
     initialEntryMode: widget.initialEntryMode ?? DatePickerEntryMode.calendar,
   );
   

2. 排查主题样式冲突
   如果调整范围后仍有问题，检查自定义主题中是否存在日期选择器文字与背景色一致的情况，导致年份文字不可见：

   ThemeData(
     datePickerTheme: DatePickerThemeData(
       yearStyle: const TextStyle(color: Colors.black), // 确保年份文字与背景有明显对比
     ),
   )
   

3. 升级Flutter版本
   部分旧版本Flutter存在日期选择器的UI bug，执行以下命令升级到最新稳定版：

   flutter upgrade
   

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