如何利用颤振中的石墨库制作交互流程图

Question

我指的是制作流程图的颤振石墨库。当我运行提供的示例时，我能够看到输出。但是我不知道该在哪里根据我的要求修改流程图。有谁能帮我修改石墨的示例代码，使我自己用颤振来制作流程图？

石墨：石墨

想要做一个这样的流程图

​

Answer 1

下面是一个使用石墨包的示例：

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

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,
        ),
      ),
    );
  }
}

这是输出：

​