Flutter流程图

一个允许您绘制具有不同可自定义元素的流程图的包。仪表板可以保存以供将来使用。

Image

在此处 查看在线示例

功能

  • 菱形、矩形、椭圆形、存储、平行四边形元素
  • 元素可以通过背景、边框和文本颜色、边框粗细、文本大小和粗细进行自定义。
  • 交互式连接元素
  • 保存/加载仪表板

用法

首先创建一个仪表板

Dashboard dashboard = Dashboard();

然后创建[FlowChart]小部件，您可以在其中响应用户交互

FlowChart(
    dashboard: dashboard,
    onDashboardTapped: ((context, position) {}),
    onDashboardLongtTapped: ((context, position) {}),
    onElementLongPressed: (context, element) {},
    onElementPressed: (context, element) {},
    onHandlerPressed: (context, position, handler, element) {},
    onHandlerLongPressed: (context, position, handler, element) {},
)

然后使用dashboard变量来添加、删除、调整大小等元素，或加载/保存仪表板。

在示例中，使用StarMenu包来轻松处理用户输入。

仪表板

Dashboard对象包含下面描述的所有用于与流程图交互的方法。

相关方法 描述
setGridBackgroundParams 设置网格背景参数
setHandlerFeedbackOffset 设置反馈偏移量，以帮助移动设备上看到箭头的末端，而不是在移动时隐藏在手指后面
setElementResizable 将元素设置为可调整大小。右下角将显示一个句柄，完成调整大小时会消失
addElement 向仪表板添加一个FlowElement
removeAllElements 删除所有元素
removeElementConnection 删除给定元素的给定句柄连接
removeElementConnections 删除给定元素的所有连接
removeElementById 从仪表板中删除所有具有给定ID的元素
removeElement 删除给定的元素
addNextById 将连接从给定的源元素指向具有给定ID的元素
saveDashboard 将仪表板保存到给定的文件路径
loadDashboard 清除仪表板并加载新的仪表板

FlowElement

FlowElement定义了元素种类及其位置、大小、颜色等。

属性 类型 描述
position 偏移量 FlowElement的位置
size Size FlowElement的大小
text 字符串 元素文本
textColor 颜色 文本颜色
textSize 双精度 文本大小
textIsBold 布尔值 如果为true，则文本加粗
kind ElementKind 元素形状：枚举{rectangle, diamond, storage, oval, parallelogram}
handlers 列表 连接句柄：枚举{topCenter, bottomCenter, rightCenter, leftCenter}
handlerSize Size 元素句柄的大小
backgroundColor Size 元素的背景颜色
borderColor Size 元素的边框颜色
borderThickness Size 元素的边框粗细
elevation Size 阴影高度
next 列表 阴影高度
相关方法 描述
setIsResizing 设置为true时，右下角将显示一个句柄，让用户可以调整其大小。完成后，它将消失。
setText 设置元素文本
setTextColor 设置文本颜色
setTextSize 设置文本大小
setTextIsBold 设置文本加粗
setBackgroundColor 设置背景颜色
setBorderColor 设置边框颜色
setBorderThickness 设置边框粗细
setElevation 设置阴影
changePosition 更改仪表板中元素的位置
changeSize 更改元素大小

示例

将元素添加到Dashboard

Dashboard dashboard = Dashboard();

///////////////////////////////////
/// Define 2 elements
FlowElement element1 = FlowElement(
    /// position in the local dashboard coordinates
    position: const Offset(100, 100),
    /// element size
    size: const Size(100, 100),
    /// text to show
    text: 'diamond',
    /// rectangle, diamond, storage, oval or parallelogram element kind
    kind: ElementKind.diamond,
    /// which handler to make active
    handlers: [
        Handler.bottomCenter,
        Handler.topCenter,
        Handler.leftCenter,
        Handler.rightCenter,
    ]);
FlowElement element2 = FlowElement(
    position: const Offset(300, 100),
    size: const Size(100, 150),
    text: 'rect',
    kind: ElementKind.rectangle,
    handlers: [
        Handler.bottomCenter,
        Handler.topCenter,
        Handler.leftCenter,
        Handler.rightCenter,
    ]);
///////////////////////////////////
/// Add the element to Dashboard
dashboard.addElement(element);

///////////////////////////////////
/// Connect right handler of element1 
/// to the left handler of element2
dashboard.addNextById(
    element1,
    element2.id,
    ArrowParams(
        thickness: 1.5,
        color: Colors.Black,
        startArrowPosition: Alignment.centerRight,
        endArrowPosition: Alignment.centerLeft,
    ),
);

///////////////////////////////////
/// Save/load dashboard
Directory appDocDir =
    await path.getApplicationDocumentsDirectory();

dashboard.saveDashboard('${appDocDir.path}/FLOWCHART.json');

dashboard.loadDashboard('${appDocDir.path}/FLOWCHART.json');

GitHub

查看 Github