Advanced Graphview enables user to create Tree, Graph, Topology Ui with simple Setup.


Advanced Graphview can create Tree, Graph, Topology Ui with simple Setup..

Getting started

Add the package in pubspec.yaml and then use the widget AdvancedGraphview.


Widget exampleWidget(){
  TestGraphNode getExampleNode() {
    return TestGraphNode(
      id: '1',
      value: "Advanced Graphview",
      graphNodes: [
 return AdvancedGraphview(
    nodePadding: 50,
    nodeSize: 200,
    isDebug: false,
    graphNode: getExampleNode(),
    pixelRatio: 10,
    onNodeTap: (graphNode) {
        content: Text("Tap Event detected ${}"),
    advancedGraphviewController: advancedGraphviewController,
    onDrawLine: (lineFrom, lineTwo) {
      return Paint()
        ..color =
        ..strokeWidth = 1;
    builder: (GraphNode graphNode) {
      return Container(
        width: 200,
        height: 200,
        child: const Center(
          child: Text("Hello"),

class TestGraphNode extends GraphNode {
  final String id;

  final String value;

  final List<GraphNode> graphNodes;
    required this.graphNodes,
    required this.value,

Additional information

For additional information contact us at [email protected] or [email protected]. We welcome more contributors on this project.