Overview

Luke Flow Diagram is a Flutter library that allows you to build beautiful and interactive visual flow diagrams for your applications.

A flow diagram consists of several components:

• LukeFlowCanvasController
• LukeFlowCanvas
• Nodes
• Sockets
• Connections

LukeFlowCanvasController

The LukeFlowCanvasController enables programmatic interaction with the LukeFlowCanvas and all its related components. You can use it to access the current state of the diagram or to execute commands that update the internal data of the diagram.

final controller = LukeFlowCanvasController<YourDataType>();

Once you’ve created a controller instance, bind it to the canvas as shown below:

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 widget renders all the visual elements of your diagram, including nodes, connections, and other UI components.

// Basic Luke Flow Canvas example 
LukeFlowCanvas( 
  controller: controller, 
  nodeBuilder: (node) { 
    //Here you can render any widget that will be displayed as a node 
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Material(
        borderRadius: BorderRadius.circular(8),
        color: Colors.black,
        child: Padding(
          padding: EdgeInsetsGeometry.all(10),
          child: Row(
            children: [
              Text(
                "This is a node",
                style: TextStyle(color: Colors.white),
              ),
            ],
          ),
        ),
      ),
    );
  }, 
) 

Nodes

Luke Flow Diagram is highly flexible and customizable. You can define your nodes using any widget via the nodeBuilder property on LukeFlowCanvas. We also provide example nodes to help you get started quickly.

Sockets

A Socket (also known as a port) is a point on a node where connections can attach. You can fully customize the appearance and positioning of sockets using the socketBuilder property on LukeFlowCanvas.

Connection Edges

Connection edges are the lines that link one node to another (or even to itself), defining the flow of data in your diagram. You can use the built-in customizable edges provided by Luke Flow Diagram, or you can implement your own.