Flutter中如何实现带起止时间限制的TimePicker？

要实现10:00到19:00的可选时间范围，直接给showTimePicker添加selectableTimePredicate参数即可，这个参数是一个回调函数，用来判断某个时间是否允许被选择。

步骤说明 #

• 先定义时间范围的起止点，比如把10:00和19:00转换成总分钟数方便比较
• 编写判断逻辑：将当前待选时间也转换成总分钟数，判断是否在起止范围内，返回true表示该时间可选，false则置灰不可选
• 将这个判断函数传给showTimePicker的selectableTimePredicate参数

修改后的完整代码 #

var selectDateTime = await showTimePicker(
  context: Get.context,
  initialTime: timeOfDay,
  // 添加时间范围限制逻辑
  selectableTimePredicate: (TimeOfDay time) {
    // 起止时间的总分钟数
    final int startTotalMinutes = 10 * 60;
    final int endTotalMinutes = 19 * 60;
    // 当前待选时间的总分钟数
    final int currentTotalMinutes = time.hour * 60 + time.minute;
    // 判断是否在允许范围内
    return currentTotalMinutes >= startTotalMinutes && currentTotalMinutes <= endTotalMinutes;
  },
  builder: (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        alwaysUse24HourFormat: 24HourForm == '24 Hour',
      ),
      // 直接复用默认的时间选择器组件，无需重新实例化TimePickerDialog
      child: child,
    );
  },
);

补充提示 #

• 你的24小时制判断可以简化，直接用24HourForm == '24 Hour'这个布尔值即可，不用写三元表达式
• 如果之前的builder里一定要自己实例化TimePickerDialog，那需要给这个Dialog也传入同样的selectableTimePredicate参数，否则限制逻辑会不生效
• 被限制的时间会在选择器里呈现置灰状态，用户无法点击选中

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