A flutter orgranizational chart with drag and drop, zoom and pan, search, collapse/expand, and exteremly easy to customize the node shape! Built entirely in flutter, so it works on all platforms supported by it!

Usage

To use this package add org_chart as a dependency in your pubspec.yaml file.

Graph implementation

import 'package:org_chart/org_chart.dart';

final Graph<Map> graph = Graph(
    boxSize: const Size(200, 100),
    nodes: [
      {
        "title": 'A',
        "id": '1',
        "to": null,
      },
      {
        "title": 'B',
        "id": '2',
        "to": '1',
      },
    ].map((e) => Node(data: e)).toList(),
    idProvider: (data) => data["id"],
    toProvider: (data) => data["to"],
  );

idProvider is a function to return the unique id of the node

toProvider is a function to return the id of the parent node if any,

Caution

(in this version if more than one node returns null from the toProvider, the 2nd node and its tree will be stacked above the first tree...)

Widget implementation

import 'package:org_chart/org_chart.dart';

OrgChart(
    graph: graph,
    builder: (node, beingDragged, isOverlapped) {
      return Card(
                color: beingDragged
                    ? Colors.blue
                    : isOverlapped
                        ? Colors.green
                        : Colors.red,
                elevation: 10,
                child: Center(
                  child: Text(node.data["title"]),
                ),
              );
    },

    optionsBuilder: (node) {
        return [
            const PopupMenuItem(value: 'Remove', child: Text('Remove')),
            const PopupMenuItem(child: Text('X1')),
            const PopupMenuItem(child: Text('X2')),
        ];
    },

    onOptionSelect: (item, value) {
        if (value == 'Remove') {
            graph.removeItem(item["id"]);
            setState(() {});
        }
    },
    onDrop: (dragged, target) {
        dragged["to"] = target["id"];
        graph.calculatePosition();
        setState(() {});
    },
  ),

Use

graph.calculatePosition();
setState(() {});
`
When you want to redraw the nodes in the original positions



## Important
This is my first package
If you have any ideas regarding this please dont hesitate to contact me.
Openning an issue or a pull request is highly appreciated.