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

Question

我是参考flutter的graphite库做流程图。当我运行提供的示例时，我能够看到输出。但我不知道在哪里进行更改以根据我的要求更改流程图。任何人都可以帮助我如何修改石墨的示例代码以在 flutter 中制作我自己的流程图

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

想制作这样的流程图

Answer 1

这里是一个使用 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,
        ),
      ),
    );
  }
}

这是输出：

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

How to use the graphite library in flutter to make interactive flowcharts

dart

flutter