Get started

This page will walk you through the process of using Luke Flow Diagram in your project with few steps.

Create a project

First, create a flutter project.

Install Luke Flow Diagram

You can install luke flow diagram with the following command:

Terminal

flutter pub add luke_flow_diagram

Or by updating your pubspec.yml with...

dependencies:
  luke_flow_diagram: <version-number>

Usage

Now you just need to import the package and create a Flow Canvas with a nodeBuilder

import 'package:luke_flow_diagram/luke_flow_diagram.dart'; 
 
class MyFlowCanvas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = LukeFlowCanvasController<DataModelExample>();
 
    return LukeFlowCanvas<DataModelExample>(
        controller: controller,
        nodes: nodes,
        initialConnections: connections,
        nodeBuilder: (node) {
            //Create your custom nodes widget here
            return Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                    color: node.data?.color ?? Colors.white,
                    borderRadius: BorderRadius.circular(8),
                ),
                child: Center(
                    child: Text(
                        node.data?.name ?? 'Node',
                        style: TextStyle(color: Colors.black),
                    ),
                ),
            );
        }
    );
  }
}