Flutter流程图绘制插件flow_graph的使用

特性

• 支持可拖动的节点；
• 支持删除节点和边；
• 支持水平和垂直布局；

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
    flow_graph: ^0.0.9

然后运行以下命令以获取依赖项：

flutter pub get

屏幕截图

使用方法

基本流程图

FlowGraphView(
	root: root, // 根节点
	direction: _direction, // 布局方向（水平或垂直）
	centerLayout: _centerLayout, // 是否居中布局
	builder: (context, node) { // 节点渲染器
		return Container(
			color: Colors.white60, // 节点背景颜色
			padding: const EdgeInsets.all(16), // 内边距
			child: Text(
				node.data.toString(), // 显示节点数据
				style: const TextStyle(color: Colors.black87, fontSize: 16), // 文本样式
			),
		);
	},
)

可拖动的流程图

DraggableFlowGraphView<FamilyNode>(
	root: root, // 根节点
	direction: _direction, // 布局方向
	centerLayout: _centerLayout, // 是否居中布局
	willConnect: (node) => true, // 是否允许连接
	willAccept: (node) => true, // 是否接受连接
	builder: (context, node) { // 节点渲染器
		return Container(
			color: Colors.white60, // 节点背景颜色
			padding: const EdgeInsets.all(16), // 内边距
			child: Text(
				(node.data as FamilyNode).name, // 显示节点数据
				style: const TextStyle(color: Colors.black87, fontSize: 16), // 文本样式
			),
		);
	},
	nodeSecondaryMenuItems: (node) { // 节点右键菜单
		return [
			PopupMenuItem(
				child: Text('Delete'), // 菜单项文本
				onTap: () { // 点击事件
					setter(() { // 更新状态
						node.deleteSelf(); // 删除当前节点
					});
				},
			)
		];
	},
)

示例代码

以下是完整的示例代码，展示如何使用flow_graph绘制一个简单的流程图。

import 'package:flutter/material.dart';
import 'package:flow_graph/flow_graph.dart'; // 导入flow_graph库

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.dark,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _root = FlowGraphNode(data: "Root"); // 创建根节点
  bool _horizontalDirection = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flow Graph Example"),
      ),
      body: Center(
        child: DraggableFlowGraphView<FlowGraphNode>(
          root: _root, // 设置根节点
          direction: _horizontalDirection ? Axis.horizontal : Axis.vertical, // 设置布局方向
          centerLayout: true, // 居中布局
          willConnect: (node) => true, // 允许连接
          willAccept: (node) => true, // 允许接受连接
          builder: (context, node) { // 自定义节点渲染
            return Container(
              color: Colors.blue[100], // 节点背景颜色
              padding: const EdgeInsets.all(16),
              child: Text(
                node.data.toString(), // 显示节点数据
                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            );
          },
          nodeSecondaryMenuItems: (node) { // 节点右键菜单
            return [
              PopupMenuItem(
                child: Text('Delete Node'),
                onTap: () {
                  setState(() {
                    node.deleteSelf(); // 删除节点
                  });
                },
              ),
              PopupMenuItem(
                child: Text('Change Color'),
                onTap: () {
                  setState(() {
                    node.color = Colors.red[100]; // 修改节点颜色
                  });
                },
              ),
            ];
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _horizontalDirection = !_horizontalDirection; // 切换布局方向
          });
        },
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}