如何在Flutter中实现类似谷歌日历的下拉滑动选择小时的小时制日历功能

可用第三方库 #

• syncfusion_flutter_calendar
  目前匹配度最高的成熟组件库，内置日/周视图默认支持垂直滚动选择时间，自带时间轴刻度展示，可自定义时间粒度（支持15分钟/30分钟/1小时等不同间隔），也可自定义选中区域样式，完全覆盖你需要的两种效果。基础时间选择功能完全免费，仅高阶扩展功能需要付费授权。
  简单使用示例：

  import 'package:syncfusion_flutter_calendar/calendar.dart';
  
  SfCalendar(
    // 启用日视图，对应单天时间轴效果
    view: CalendarView.day,
    timeSlotViewSettings: TimeSlotViewSettings(
      // 自定义时间间隔，可按需调整
      timeInterval: Duration(minutes: 15),
      timeIntervalHeight: 40,
    ),
    // 点击/选择时间时的回调
    onTap: (CalendarTapDetails details) {
      DateTime selectedTime = details.date!;
      // 后续处理选中时间的逻辑
    },
  )
  

• flutter_week_view
  轻量级开源组件，无付费限制，支持自定义时间轴样式、事件块渲染，垂直滚动选时间交互可通过配置参数直接开启，适合需要高度自定义的场景。
• timetable
  专门针对日程场景开发的时间轴组件，支持多日视图、时间戳精确对齐，滚动选择时间逻辑已封装完成，可直接获取用户选中的时间区间。

自定义实现思路 #

如果现有库不能满足你的定制需求，也可以自行基于基础组件实现：

• 用垂直ListView作为时间轴载体，每个列表项对应固定时间间隔，左侧固定展示时间刻度
• 监听拖动手势，计算手指拖动的起始和结束位置对应的时间区间，渲染选中色块
• 配合ScrollController可实现默认滚动到指定时间位置的能力

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