CODEWITHSUNDEEP
flutterdart
Dolly
Dolly

Reputation: 33

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

I am referring to the graphite library of flutter to make flowcharts. When I run the example provided , I am able to see the output. But I don't know where to make the changes to change the flowchart as per my requirement. Can anyone please help me on how to modify the example code of graphite to make my own flowchart in flutter

graphite: https://github.com/lempiy/flutter_graphite

Want to make a flowchart something like this enter image description here

Upvotes: 2

Views: 953

Answers (1)

G H Prakash
G H Prakash

Reputation: 1857

Here is an example to use a graphite package:

The below code shows the connections according to your image.

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:enter image description here

Upvotes: 1

Related Questions