Flutter中如何限制showTimePicker的可选时间范围？

一、使用官方新增的selectableTimePredicate属性 #

Flutter新版本中，showTimePicker移除了旧的allowedHours和allowedMinutes属性，取而代之的是selectableTimePredicate回调——通过这个回调可以灵活判断任意时间是否允许用户选择，完全覆盖旧属性的功能。

示例1：限制仅可选择12:00-18:00之间的时间 #

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  selectableTimePredicate: (TimeOfDay time) {
    // 将时间转换为分钟数，简化范围判断
    final int currentTotalMinutes = time.hour * 60 + time.minute;
    final int startTotalMinutes = 12 * 60; // 12:00对应的分钟数
    final int endTotalMinutes = 18 * 60; // 18:00对应的分钟数
    return currentTotalMinutes >= startTotalMinutes && currentTotalMinutes <= endTotalMinutes;
  },
  displayDisabledValues: true,
);

示例2：同时限制小时范围和分钟间隔（如仅允许0/10/20/30/40/50分） #

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  selectableTimePredicate: (TimeOfDay time) {
    // 限制小时在8-12、15-17区间
    bool isHourAllowed = (time.hour >= 8 && time.hour <= 12) || (time.hour >= 15 && time.hour <= 17);
    // 限制分钟为10的倍数
    bool isMinuteAllowed = time.minute % 10 == 0;
    return isHourAllowed && isMinuteAllowed;
  },
  displayDisabledValues: true,
);

二、使用第三方时间选择器包 #

如果官方的selectableTimePredicate无法满足更复杂的UI或交互需求，可以考虑第三方包，以下是flutter_time_picker_spinner的使用示例：

1. 添加依赖到pubspec.yaml #

dependencies:
  flutter_time_picker_spinner: ^2.0.0

2. 实现时间范围与分钟间隔限制 #

FlutterTimePickerSpinner(
  is24HourMode: true,
  onTimeChange: (DateTime time) {
    // 处理用户选择后的逻辑
  },
  minTime: TimeOfDay(hour: 12, minute: 0),
  maxTime: TimeOfDay(hour: 18, minute: 0),
  interval: 10, // 设置分钟间隔为10分钟
);

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