Flutter iOS Date Picker日期范围限制：仅显示昨今明三天

问题根源 #

Flutter默认的CupertinoDatePicker即便设置了minimumDate和maximumDate，UI层面仍会允许滚动显示超出范围的日期（仅限制最终选择）。要实现仅展示指定三天的效果，需要通过自定义选择器完全控制显示内容。

解决方案1：自定义CupertinoPicker实现精准控制 #

直接用CupertinoPicker构建仅包含目标三天的选择器，彻底避免无关日期的显示：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class LimitedDatePicker extends StatefulWidget {
  final ValueChanged<DateTime> onDateSelected;
  final DateTime initialDate;

  const LimitedDatePicker({
    super.key,
    required this.onDateSelected,
    required this.initialDate,
  });

  @override
  State<LimitedDatePicker> createState() => _LimitedDatePickerState();
}

class _LimitedDatePickerState extends State<LimitedDatePicker> {
  late List<DateTime> _availableDates;
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    // 生成目标三天的日期对象
    final today = DateTime.now();
    _availableDates = [
      DateTime(today.year, today.month, today.day - 1),
      today,
      DateTime(today.year, today.month, today.day + 1),
    ];
    // 匹配初始日期的索引，默认选中今天
    _selectedIndex = _availableDates.indexWhere(_isSameDay);
    if (_selectedIndex == -1) _selectedIndex = 1;
  }

  bool _isSameDay(DateTime a, DateTime b) {
    return a.year == b.year && a.month == b.month && a.day == b.day;
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPicker(
      itemExtent: 40,
      onSelectedItemChanged: (index) {
        setState(() => _selectedIndex = index);
        widget.onDateSelected(_availableDates[index]);
      },
      scrollController: FixedExtentScrollController(initialItem: _selectedIndex),
      children: _availableDates.map((date) {
        String label;
        if (_isSameDay(date, DateTime.now())) {
          label = '今天';
        } else if (_isSameDay(date, DateTime.now().subtract(const Duration(days: 1)))) {
          label = '昨天';
        } else {
          label = '明天';
        }
        return Center(child: Text(label));
      }).toList(),
    );
  }
}

使用示例 #

// 在弹窗中唤起自定义选择器
showCupertinoModalPopup(
  context: context,
  builder: (_) => Container(
    height: 200,
    color: CupertinoColors.white,
    child: LimitedDatePicker(
      initialDate: DateTime.now(),
      onDateSelected: (selectedDate) {
        // 处理选中的日期逻辑
        Navigator.pop(context);
      },
    ),
  ),
);

解决方案2：原生CupertinoDatePicker的折中处理（仅限制选择） #

如果坚持使用原生组件，可通过设置范围+滚动监听强制回到合法区间，但UI仍会显示超出范围的日期：

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.date,
  initialDateTime: DateTime.now(),
  minimumDate: DateTime.now().subtract(const Duration(days: 1)),
  maximumDate: DateTime.now().add(const Duration(days: 1)),
  onDateTimeChanged: (date) {
    // 可额外校验，确保选中日期在允许范围内
  },
)

注意：此方案下用户仍能滚动看到无关日期，但选中时会自动跳回最近的合法日期，体验不如自定义选择器直接。

关键提示 #

iOS原生日期选择器的设计逻辑就是允许滚动超出范围但限制最终选择，因此自定义选择器是实现“仅展示三天”需求的最可靠方案，还能灵活控制显示文本（比如直接显示“昨天/今天/明天”）。

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