graph_dot 是一个用于在 Flutter 应用中渲染图形（Graph）的插件，它基于 Graphviz 的 DOT 语言。通过 graph_dot，你可以轻松地在 Flutter 应用中创建和渲染各种类型的图形，如流程图、组织结构图、网络拓扑图等。

以下是如何在 Flutter 项目中使用 graph_dot 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 graph_dot 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  graph_dot: ^0.1.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 graph_dot 包。

import 'package:graph_dot/graph_dot.dart';

3. 创建图形

使用 GraphDot 组件来创建和渲染图形。你可以通过 dot 属性来指定 DOT 语言描述的图形。

class MyGraph extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Graph Example'),
      ),
      body: Center(
        child: GraphDot(
          dot: '''
            digraph G {
              A -> B;
              B -> C;
              C -> D;
              D -> A;
            }
          ''',
        ),
      ),
    );
  }
}

4. 运行应用

在你的 main.dart 文件中运行应用。

void main() {
  runApp(MaterialApp(
    home: MyGraph(),
  ));
}

5. 自定义图形

你可以通过修改 DOT 语言描述来自定义图形。例如，添加节点属性、边属性等。

GraphDot(
  dot: '''
    digraph G {
      A [label="Node A", shape=box, color=blue];
      B [label="Node B", shape=circle, color=red];
      C [label="Node C", shape=ellipse, color=green];
      D [label="Node D", shape=diamond, color=purple];
      
      A -> B [label="Edge 1", color=orange];
      B -> C [label="Edge 2", color=cyan];
      C -> D [label="Edge 3", color=pink];
      D -> A [label="Edge 4", color=brown];
    }
  ''',
)

6. 处理交互

graph_dot 插件还支持处理用户交互，例如点击节点或边。你可以通过 onNodeSelected 和 onEdgeSelected 回调来处理这些事件。

GraphDot(
  dot: '''
    digraph G {
      A -> B;
      B -> C;
      C -> D;
      D -> A;
    }
  ''',
  onNodeSelected: (nodeId) {
    print('Node selected: $nodeId');
  },
  onEdgeSelected: (edgeId) {
    print('Edge selected: $edgeId');
  },
)

7. 处理布局和样式

你可以通过 options 参数来调整图形的布局和样式。例如，设置图形的方向、节点间距等。

GraphDot(
  dot: '''
    digraph G {
      A -> B;
      B -> C;
      C -> D;
      D -> A;
    }
  ''',
  options: GraphOptions(
    layout: LayoutOptions(
      rankdir: 'LR',  // 从左到右布局
      nodesep: 0.5,   // 节点间距
      ranksep: 0.5,   // 层级间距
    ),
    node: NodeOptions(
      shape: 'box',   // 节点形状
      color: 'blue',  // 节点颜色
    ),
    edge: EdgeOptions(
      color: 'red',   // 边颜色
      arrowhead: 'vee',  // 箭头形状
    ),
  ),
)

8. 处理动态图形

如果你需要动态更新图形，可以使用 StatefulWidget 并在状态变化时更新 dot 属性。

class DynamicGraph extends StatefulWidget {
  @override
  _DynamicGraphState createState() => _DynamicGraphState();
}

class _DynamicGraphState extends State<DynamicGraph> {
  String _dot = '''
    digraph G {
      A -> B;
      B -> C;
      C -> D;
      D -> A;
    }
  ''';

  void _updateGraph() {
    setState(() {
      _dot = '''
        digraph G {
          A -> B;
          B -> C;
          C -> D;
          D -> A;
          E -> A;
          E -> D;
        }
      ''';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Graph Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GraphDot(
              dot: _dot,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _updateGraph,
              child: Text('Update Graph'),
            ),
          ],
        ),
      ),
    );
  }
}

9. 处理复杂图形

对于更复杂的图形，你可以使用 Graphviz 的 DOT 语言的所有功能，例如子图、群集、多边等。

GraphDot(
  dot: '''
    digraph G {
      subgraph cluster_0 {
        label="Cluster 1";
        A -> B;
        B -> C;
        C -> A;
      }
      subgraph cluster_1 {
        label="Cluster 2";
        D -> E;
        E -> F;
        F -> D;
      }
      A -> D;
      C -> F;
    }
  ''',
)