Flutter中DateRangePicker日期列表空值异常及范围不符问题求助

1. 修复空值错误 #

核心问题是未处理日期选择器可能返回的null值，以及未正确初始化日期范围变量。先声明可空的日期范围变量，在选择器回调中判断结果非空后再更新状态：

DateTimeRange? _selectedRange;

Future<void> _showDatePicker() async {
  final pickedRange = await showDateRangePicker(
    context: context,
    firstDate: DateTime(2020),
    lastDate: DateTime.now(),
  );
  // 必须判断选择结果是否为空，避免空值异常
  if (pickedRange != null) {
    setState(() {
      _selectedRange = pickedRange;
    });
  }
}

2. 生成选中范围内的日期列表 #

写一个方法，基于用户选择的日期范围生成完整的日期列表，同时处理未选择日期的情况：

List<DateTime> _getAllDatesInRange() {
  final dates = <DateTime>[];
  if (_selectedRange == null) return dates;

  final start = _selectedRange!.start;
  final end = _selectedRange!.end;

  // 循环生成从起始日到结束日的所有日期
  for (var date = start; date.isBefore(end.add(const Duration(days: 1))); date = date.add(const Duration(days: 1))) {
    dates.add(date);
  }
  return dates;
}

3. 正确渲染ListView #

在ListView.builder中使用上面生成的日期列表，同时处理列表为空的场景：

ListView.builder(
  itemCount: _getAllDatesInRange().length,
  itemBuilder: (context, index) {
    final date = _getAllDatesInRange()[index];
    return ListTile(
      title: Text("${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}"),
    );
  },
)

4. 排查手动设置异常 #

如果手动设置日期后范围显示不对，要确保赋值的是DateTimeRange类型，而非单独的DateTime：

// 正确的手动赋值方式
_selectedRange = DateTimeRange(
  start: DateTime(2024, 5, 1),
  end: DateTime(2024, 5, 10),
);

内容的提问来源于stack exchange，提问作者نور محمد