Overview

Luke Flow Diagram is a library that helps you create beatifull and interactive visual flow diagrams for your flutter application.

A Flow Diagram has multiple components: LukeFlowCanvasController, LukeFlowCanvas, Nodes, Sockets and Connections.

LukeFlowCanvasController

This is a controller that allows you to programatically interact with you FlowCanvas with all the other components. You can use it the acces the state of the diagram or execute commands that will update the diagrams internal data.

final controller = LukeFlowCanvasController<YourDataType>();

After creating an instance of a controller, you need to bind it on the Canvas like this:

import 'package:luke_flow_diagram/luke_flow_diagram.dart';
 
class MyFlowCanvas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = LukeFlowCanvasController<YourDataType>(); 
 
    return LukeFlowCanvas<DataModelExample>(
        controller: controller, 
        nodes: nodes,
        initialConnections: connections,
    );
  }
}

LukeFlowCanvas

This is a widget where the diagram is rendered with all its components.

Nodes

Sockets

Connection Edges