zeba_academy_flowchart_ui #

A powerful Flutter package for building interactive flowcharts, workflow diagrams, and visual process editors. Create process blocks, decision nodes, draggable workflows, and connector-based diagrams with an easy-to-use controller API.

Features #

✅ Process Blocks

✅ Decision Nodes

✅ Workflow Diagrams

✅ Connector Routing

✅ Drag-and-Drop Support

✅ Zoom & Pan Navigation

✅ Controller-Based Architecture

✅ Custom Node Positioning

✅ Lightweight & Dependency-Free

Preview #

Build interactive flowcharts directly in Flutter applications.

Supported node types:

• Process Nodes
• Decision Nodes

Supported interactions:

• Drag nodes
• Connect workflows
• Zoom canvas
• Pan workspace

Installation #

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_flowchart_ui: ^1.0.0

Install dependencies:

flutter pub get

Import #

import 'package:zeba_academy_flowchart_ui/zeba_academy_flowchart_ui.dart';

Basic Usage #

Create a Controller #

final controller = FlowchartController();

Add Nodes #

controller.addNode(
  FlowNode(
    id: "start",
    title: "Start",
    type: FlowNodeType.process,
    position: const Offset(100, 100),
  ),
);

controller.addNode(
  FlowNode(
    id: "decision",
    title: "Approved?",
    type: FlowNodeType.decision,
    position: const Offset(400, 200),
  ),
);

Create Connections #

controller.addConnection(
  "start",
  "decision",
);

Display Flowchart #

FlowchartCanvas(
  controller: controller,
)

Complete Example #

import 'package:flutter/material.dart';
import 'package:zeba_academy_flowchart_ui/zeba_academy_flowchart_ui.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  final controller = FlowchartController();

  @override
  void initState() {
    super.initState();

    controller.addNode(
      FlowNode(
        id: "1",
        title: "Start",
        type: FlowNodeType.process,
        position: const Offset(100, 100),
      ),
    );

    controller.addNode(
      FlowNode(
        id: "2",
        title: "Decision",
        type: FlowNodeType.decision,
        position: const Offset(400, 250),
      ),
    );

    controller.addConnection(
      "1",
      "2",
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flowchart Demo"),
      ),
      body: FlowchartCanvas(
        controller: controller,
      ),
    );
  }
}

API Overview #

FlowNode #

Represents a node within the flowchart.

FlowNode(
  id: "node1",
  title: "Process",
  type: FlowNodeType.process,
  position: Offset(100, 100),
)

FlowNodeType #

Available node types:

FlowNodeType.process
FlowNodeType.decision

FlowchartController #

Manage nodes and connections.

controller.addNode(node);

controller.addConnection(
  "source",
  "target",
);

controller.moveNode(
  "nodeId",
  const Offset(200, 200),
);

Roadmap #

Version 1.1.0 #

• Arrow connectors
• Curved paths
• Connector labels
• Grid background
• Snap-to-grid

Version 1.2.0 #

• PNG export
• SVG export
• Mini-map support
• Auto-layout algorithms

Version 2.0.0 #

• BPMN support
• Undo/Redo
• Multi-select
• Copy/Paste
• Keyboard shortcuts
• Node grouping
• Advanced workflow editor

License #

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

• Use
• Modify
• Distribute
• Contribute

Under the terms of the GPL-3.0 License.

For full license text, see the LICENSE file or visit:

https://www.gnu.org/licenses/gpl-3.0.en.html

About Me #

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn.

Website: https://sufyanism.com

LinkedIn: https://www.linkedin.com/in/sufyanism

Your All-in-One Learning Hub #

🚀 Explore courses and resources in coding, technology, and development through Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on learning experiences.

Zeba Academy #

➡ Main Website https://zeba.academy

➡ Learning Platform https://code.zeba.academy

➡ YouTube Channel https://www.youtube.com/@zeba.academy

➡ Instagram https://www.instagram.com/zeba.academy

Made with ❤️ by Zeba Academy

Building Flutter packages that help developers create amazing applications.