Flutter如何在24小时格式的ShowTimePicker中限制可选时间范围

方案1：基于Flutter官方showTimePicker改造 推荐，无第三方依赖 #

Flutter SDK自带的时间选择器原生支持24小时格式，且提供了可选时间范围限制参数，不需要引入第三方插件，稳定性更高：

• 调用时通过MediaQuery配置alwaysUse24HourFormat: true强制开启24小时显示格式
• 通过selectableTimePredicate参数配置校验规则，仅营业时间范围内的时间可以被选中

示例代码如下：

// 可配置的营业时间：示例为早8点至晚22点
final TimeOfDay businessStart = const TimeOfDay(hour: 8, minute: 0);
final TimeOfDay businessEnd = const TimeOfDay(hour: 22, minute: 0);

Future<void> openTimePicker(BuildContext context) async {
  final TimeOfDay? selectedTime = await showTimePicker(
    context: context,
    initialTime: const TimeOfDay(hour: 9, minute: 0), // 初始默认选中时间
    // 强制24小时格式
    builder: (context, child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
    // 限制仅营业时间可选，超出范围的时间会自动置灰不可选
    selectableTimePredicate: (time) {
      if (time == null) return false;
      // 转换为分钟数做大小比较，逻辑更简洁
      int currentTotal = time.hour * 60 + time.minute;
      int startTotal = businessStart.hour * 60 + businessStart.minute;
      int endTotal = businessEnd.hour * 60 + businessEnd.minute;
      return currentTotal >= startTotal && currentTotal <= endTotal;
    },
  );
  // 后续处理选中时间的业务逻辑
}

方案2：自定义滚轮时间选择器（适配自定义UI需求） #

如果官方弹窗的交互样式不符合产品设计要求，可以自己基于CupertinoPicker/ListWheelScrollView实现纯24小时制滚轮选择器：

• 小时选项直接生成营业时间起始小时到结束小时的数组，从源头限制可选小时范围
• 分钟选项可按业务需求设置步长（如15分钟、30分钟），避免无效时间选项
• 选中后直接拼接小时、分钟数值即可，可控性更高，不会出现无法选择正确时间的问题

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