如何在Flutter中实现支持节点跳转及斜向箭头连线的流程图？

针对你需要实现带可点击圆形节点、斜向箭头连线的路线图流程图需求，可通过以下两种路径实现：

1. 原生自定义绘制（无额外依赖） #

• 使用CustomPaint组件完成连线和箭头绘制：提前计算每个圆形节点的中心坐标，调用canvas.drawLine绘制任意角度的斜向连线，再在连线终点位置根据连线斜率计算箭头两个侧边的坐标，通过canvas.drawPath绘制三角形箭头即可，样式、粗细、颜色都可自定义调整。
• 可点击圆形节点用GestureDetector包裹Container实现，配置onTap回调触发对应页面的路由跳转逻辑，节点位置和CustomPaint的连线坐标共用一套计算规则，避免出现节点和连线错位的问题。
• 如果是固定结构的路线图，可直接写死坐标；如果是动态生成的路线图，可按节点层级、排布规则批量计算每个节点的偏移量即可。

2. 第三方组件简化开发 #

可直接使用Pub平台上成熟的流程图组件，省去自定义绘制的逻辑开发：

• flutter_flowchart：封装了节点、连线的基础逻辑，支持自定义节点样式、连线样式，只需要配置节点坐标、连线起止点，即可自动生成斜向箭头连线，同时内置节点点击回调。
• graphview：支持树形图、流程图等多种布局，只需要配置节点列表和节点间的关联关系，即可自动完成布局和连线绘制，支持自定义节点为任意样式的可点击组件。
• mindmap_view：如果是树状结构的路线图，也可以用该组件快速实现，适配移动端滚动、缩放的交互需求。

参考流程图效果 #

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