Flutter中是否有可用的简易小时范围选择器组件？

算力阿峰

2026-8-29

问题

Flutter 内置了一款简易的date picker widget（日期选择器组件），名为 DateRangePickerDialog。我需要实现活动开始小时与结束小时的选择功能，请问在哪里可以找到现成可用的对应组件？

参考示例截图
效果演示动图

回答

Flutter 官方SDK本身没提供和DateRangePickerDialog对标的开箱即用时间范围选择组件，要实现你截图里的小时范围选择，有几个可行方案：

零依赖快速实现：不想引入第三方包的话，直接调用两次原生的showTimePicker方法就行，第一次唤起选开始小时，第二次唤起选结束小时，自己加个简单校验逻辑——结束时间不能早于开始时间，就能满足基础需求。这种方案的优点是和系统组件风格完全统一，不需要额外加依赖，缺点是分两步操作，不是截图里单弹窗同屏选两个时间的效果。
现成组件直接复用：要和截图效果完全一致、拿来就能用的话，用公开的时间范围选择组件即可，这类组件基本都支持配置时间选择步长，把步长设为1小时就能实现纯整小时选择的需求，默认选中值、可选时间范围、弹窗主题样式都支持自定义，选完直接返回开始和结束的时间对象，对接业务逻辑的成本很低。
自定义实现：如果现成组件的样式和交互不符合你的设计要求，自己开发也没什么难度：基于官方的CupertinoPicker（iOS风格滚轮）或者ListWheelScrollView组件拼个双列滚轮布局，左列放0-23的开始小时选项，右列放0-23的结束小时选项，加个简单的联动逻辑——选中开始小时后，右列自动把早于开始时间的选项置灰或者过滤掉，百来行代码就能搞定，交互和样式可以完全按需求调整。