如何让Flutter Date Range Picker自动保存日期范围并关闭弹窗？

不需要完全自定义日期选择器，通过监听组件内部的通知就能实现需求。Flutter自带的showDateRangePicker会在用户选择日期时发送DateRangePickerSelectionChangedNotification，我们可以监听这个通知，当同时选中开始和结束日期时，手动触发弹窗关闭并返回选中的范围。

修改后的代码： #

_showDatePicker() async {
  DateTimeRange? dates = await showDateRangePicker(
    context: context,
    firstDate: widget.dateFrom ?? DateTime.now(),
    lastDate: DateTime(2033, 12, 31),
    currentDate: DateTime.now(),
    useRootNavigator: true,
    saveText: 'Select',
    builder: (context, child) {
      // 监听日期选择变化通知
      return NotificationListener<DateRangePickerSelectionChangedNotification>(
        onNotification: (notification) {
          // 当开始和结束日期都被选中时，自动提交并关闭弹窗
          if (notification.dateRange?.start != null && notification.dateRange?.end != null) {
            Navigator.of(context).pop(notification.dateRange);
            return true; // 阻止通知继续传播
          }
          return false;
        },
        child: Column(
          children: [
            ConstrainedBox(
              constraints: BoxConstraints(maxWidth: 400.0, maxHeight: 700.0),
              child: Container(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                child: child,
              ),
            )
          ],
        ),
      );
    },
  );

  if (dates != null) {
    // 修正原代码错误：DateTimeRange不能和int比较，改为判断是否为同一天
    if (dates.start == dates.end) {
      widget.onChanged!(dates.start, dates.start);
    } else {
      widget.onChanged!(dates.start, dates.end);
    }
  }
}

关键说明： #

• NotificationListener会捕获日期选择器内部的选择变化通知，当dateRange的start和end都不为空时，说明用户已选完完整日期范围，此时调用Navigator.of(context).pop(notification.dateRange)就能直接返回结果并关闭弹窗，无需点击Select按钮。
• 原代码中if (dates == 1)属于类型错误，这里改为判断开始和结束日期是否相同，匹配你的业务逻辑。
• 这种方式无需修改组件源码或完全自定义日期选择器，仅通过监听内部通知扩展行为，简单高效。

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