flutter_graphite

KO | EN

gitlite — search

#javascript #python #react #typescript #android #machine-learning #rust #linux #java #windows #awesome #cli #pytorch #ios

flutter_graphite

(★ 185)

Flutter widget to draw interactive direct graphs (flowcharts) of any complexity in a tile rectangular manner.

File Explorer

Download Latest Version (.zip)

- - dart.yml
- - .gitignore
  - build.gradle
  - gradle.properties
  - settings.gradle
- - Agumon(Burst).png
  - Agumon(savers).jpeg
  - Agumon.jpeg
  - AncientGreymon.jpeg
  - botomon.jpeg
  - GeoGreymon.jpeg
  - Goddramon.jpeg
  - Greymon.jpeg
  - koromon.jpeg
  - MasterTyranomon.jpeg
  - MetalGreymon.jpeg
  - RizeGreymon.jpeg
  - ShineGreymon.jpeg
  - ShineGreymonBurstMode.jpeg
  - ShineGreymonRuinMode.jpeg
  - Skullgreymon.jpeg
  - Tyranomon.jpeg
  - VictoryGreymon.jpeg
  - WarGreymon.jpeg
- - .gitignore
- - custom_edges.dart
  - digimon.dart
  - flowchart.dart
  - labels.dart
  - main.dart
- - .gitignore
  - CMakeLists.txt
  - main.cc
  - my_application.cc
  - my_application.h
- - .gitignore
- - favicon.png
  - index.html
  - manifest.json
- - .gitignore
  - CMakeLists.txt
- .gitignore
- .metadata
- analysis_options.yaml
- pubspec.lock
- pubspec.yaml
- README.md
- cba.svg
- custom.gif
- dig.gif
- flo.gif
- leb.gif
- vertical.gif
- - graph.dart
  - graph_basic.dart
  - graph_matrix.dart
  - matrix.dart
  - traverse_queue.dart
  - typings.dart
- graphite.dart
- graphite_canvas.dart
- graphite_cell.dart
- graphite_edges_painter.dart
- graphite_root.dart
- graphite_typings.dart
- utils.dart
- graphite_test.dart
.gitignore
.metadata
CHANGELOG.md
LICENSE
pubspec.lock
pubspec.yaml
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Graphite

[![Actions Status](https://github.com/lempiy/flutter_graphite/workflows/tests/badge.svg)](https://github.com/lempiy/flutter_graphite/actions)
[![](https://img.shields.io/pub/v/graphite)](https://pub.dev/packages/graphite)
[![](https://img.shields.io/badge/package-flutter-blue)](https://github.com/lempiy/flutter_graphite)
[![](https://img.shields.io/github/license/lempiy/flutter_graphite)](https://github.com/lempiy/flutter_graphite)
[![](https://img.shields.io/github/stars/lempiy/flutter_graphite)](https://github.com/lempiy/flutter_graphite)
[![](https://img.shields.io/github/languages/code-size/lempiy/flutter_graphite)](https://github.com/lempiy/flutter_graphite)

:arrow_right: :black_square_button: Flutter widget to draw direct graphs, trees, flowcharts in rectanglar manner.

#### Support the author :yellow_heart: :blue_heart:

[![](https://raw.githubusercontent.com/lempiy/flutter_graphite/master/image/cba.svg)](https://savelife.in.ua/en/donate-en/#donate-army-card-once)

The only reason why the latest release of Graphite become possible is because of __Armed Forces Of Ukraine__.
Ukrainian defenders are those who saved the author's life last spring and currently continue fighting 
with absolute evil in my country. If you liked this lib and want to support future releases I would 
be grateful for your donations to [Come Back Alive](https://savelife.in.ua/en/donate-en/#donate-army-card-once) Charity which directly supports UA Army with equipment.

Thank you.

![vertical](https://raw.githubusercontent.com/lempiy/flutter_graphite/master/image/vertical.gif)  ![custom](https://raw.githubusercontent.com/lempiy/flutter_graphite/master/image/custom.gif)

![flowchart](https://raw.githubusercontent.com/lempiy/flutter_graphite/master/image/flo.gif)

![label](https://raw.githubusercontent.com/lempiy/flutter_graphite/master/image/leb.gif)

![digimon](https://raw.githubusercontent.com/lempiy/flutter_graphite/master/image/dig.gif)

## Example of usage:
```dart
import 'package:flutter/material.dart';
import 'package:graphite/graphite.dart';

void main() => runApp(MyApp());
const list = '['
    '{"id":"A","next":[{"outcome":"B"}]},'
    '{"id":"B","next":[{"outcome":"C"},{"outcome":"D"},{"outcome":"E"}]},'
    '{"id":"C","next":[{"outcome":"F"}]},'
    '{"id":"D","next":[{"outcome":"J"}]},{"id":"E","next":[{"outcome":"J"}]},'
    '{"id":"J","next":[{"outcome":"I"}]},'
    '{"id":"I","next":[{"outcome":"H"}]},{"id":"F","next":[{"outcome":"K"}]},'
    '{"id":"K","next":[{"outcome":"L"}]},'
    '{"id":"H","next":[{"outcome":"L"}]},{"id":"L","next":[{"outcome":"P"}]},'
    '{"id":"P","next":[{"outcome":"M"},{"outcome":"N"}]},'
    '{"id":"M","next":[]},{"id":"N","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) {
    return Scaffold(
      body: InteractiveViewer(
        constrained: false,
        child: DirectGraph(
          list: nodeInputFromJson(list),
          defaultCellSize: const Size(100.0, 100.0),
          cellPadding: const EdgeInsets.all(20),
          orientation: MatrixOrientation.Vertical,
       ),
      )
    );
  }
}
```

## Features
* Nodes and edge gesture events.
* Ability provide graph building direction (horizontal or vertical).
* Ability to provide custom builder to node widget.
* Ability to add overlays.
* Ability to add edge text or `Widget` labels.
* Ability to provide custom paint builder to graph edges.
* Ability to customize arrows and lines.

## License

flutter_graphite

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

flutter_graphite

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README