如何使用flutter中的graphite库制作交互式流程图

发布于05月24日

我正在参考flutter的石墨库来制作流程图.当我运行提供的示例时，我能够看到输出.但我不知道在哪里根据我的要求更改流程图.有谁能帮我修改graphite的示例代码，让我在Flutter 中制作自己的流程图

石墨:https://github.com/lempiy/flutter_graphite

Want to make a flowchart something like this

推荐答案

以下是使用graphite软件包的示例:

下面的代码根据您的图像显示连接.

import 'package:flutter/material.dart';
import 'package:graphite/core/matrix.dart';
import 'package:graphite/core/typings.dart';
import 'package:graphite/graphite.dart';

void main() => runApp(MyApp());
const reqBasic = '[{"id":"A","next":["B"]},{"id":"B","next":["C"]},{"id":"C","next":["D","E"]},{"id":"D","next":[]},{"id":"E","next":["F"]},{"id":"F","next":[]}]';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Graphite',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var list = nodeInputFromJson(reqBasic);
    return Scaffold(
      body: Center(
        child: DirectGraph(
          list: list,
          cellWidth: 136.0,
          cellPadding: 24.0,
          orientation: MatrixOrientation.Horizontal,
        ),
      ),
    );
  }
}

Here is the output: