功能描述
Flutter实现时间轴效果，同时带日历插件，通过选择日期回调实现底部时间轴渲染。
时间轴
技术解析
Stack可以在一个基础小部件上排列其他小部件，这些小部件可以全部或者部分覆盖基础小部件，其他小部件实现在基础小部件上的绝对定位。
Stack应用：
- 用于一个或者多个小部件覆盖另一个小部件
- Stack孩子小部件中的一个孩子组件作为基础小部件，后边的所有孩子小部件覆盖这个基础小部件
- Stack中的内容不能滚动
- 可以选择剪切溢出到渲染盒子外的孩子小部件
代码片段
Stack的第一个孩子小部件，渲染具体内容，此处用Card显示事件内容，可以根据具体需要任何其他小部件， EdgeInsets.only(left: 50.0)将具体内容左侧加padding给时间轴留出空间。
Padding(
padding: EdgeInsets.only(left: 50.0),
child: Card(
margin: EdgeInsets.all(20.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
width: double.infinity,
child: Text('hello world'),
),
),
),
Stack的第二个孩子小部件，渲染时间轴的连线，通过Positioned进行绝对定位
Positioned(
top: 0.0,
bottom: 0.0,
left: 35.0,
child: Container(
height: double.infinity,
width: 1.0,
color: Colors.blue,
),
),
第三个小部件同样通过Positioned进行绝对定位，同时，将两个Container嵌套一起实现圆环效果，margin: EdgeInsets.all(3.0), 确定外围圆环宽度。
Positioned(
top: 13.0,
left: 22.5,
child: Container(
height: 26.0,
width: 26.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.yellow,
),
child: Container(
margin: EdgeInsets.all(3.0),
height: 26.0,
width: 26.0,
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.red),
),
),
)
顶部日历组件
顶部日历组件通过flutter_calendar实现，onDateSelected 方法是选择日期后的回调函数
Calendar(
onSelectedRangeChange: (range) =>
print("Range is ${range.item1}, ${range.item2}"),
onDateSelected: (date) => handleNewDate(date),
),
源码
点击Github源码浏览下载本示例完整源码