自定义时间轴示例

一个Flutter应用程序,演示了CustomPainter、flutter_boxy和交错动画的用法。

演示

output.mp4


挑战

  • 决定使用哪种方法通过CustomPainter创建连接器至关重要。我最终使用Rect来绘制弧线。
  • 将连接器与卡片小部件粘合起来很棘手,我决定尝试使用boxy,因为我需要知道布局元素的尺寸和位置。
  • 动画连接器非常棘手,因为它由两部分组成(线条和弧线)。

有重构建议?创建一个Issue!

参考

有关开始使用 Flutter 的帮助,请参阅
在线文档,其中提供教程,
示例、移动开发指南和完整的 API 参考。

GitHub

查看 Github