🚀 We're Participating in the OnlyDust Open Source Hackathon!

The fl_nodes project is taking part in the OnlyDust Open Source Hackathon starting May 28th, 2025!

If you're interested in Flutter, visual programming, or node-based interfaces, this is a great chance to contribute, learn, and collaborate. We’ll soon tag beginner-friendly issues and update documentation. We are ready to support contributors of all experience levels.

👉 Check out the Issues to get started.

FlNodes is a lightweight, scalable, and highly customizable Flutter package for building interactive, node-based user interfaces.

Whether you're building tools for developers, designers, or end-users, FlNodes provides the building blocks for:

• 🎮 Visual Scripting Editors – Game logic, automation flows, or state machines.

• 🛠 Workflow & Process Designers – Business rules, decision trees, and automation paths.

• 🎨 Shader & Material Graphs – Build custom shaders visually.

• 📊 Dataflow Tools – ETL pipelines, AI workflows, and processing graphs.

• 🤖 ML Architecture Visualizers – Visualize and configure neural networks.

• 🔊 Modular Audio Systems – Synthesizers, effect chains, or sequencing tools.

• 🧠 Graph-Based UIs – Mind maps, dependency trees, and hierarchical structures.

• ✅ Customizable UI – Fully override widgets, ports, fields, and layout logic.

• 💾 Pluggable Storage – Save/load via JSON with full control over serialization.

• ⚡ Optimized Performance – Hardware-accelerated, efficient hit testing and rebuild minimization.

• 🔗 Flexible Graph System – Directional edges, nested data, typed ports, and more.

• 📏 Scalable Architecture – Suitable for both lightweight diagrams and complex editors.

• 🎨 Lightweight & Elegant – Minimal dependencies, beautiful out of the box, and easy to style.

We're iterating fast, thanks to community adoption, forks, and feedback. Here's what’s next:

• Addressing common issues raised in GitHub discussions and forks.

• Fixes for node field state persistence and ID mismatches.

• Improvements to hit testing and z-ordering in dense graphs.

• Surgical Rebuilds – Rebuild only the nodes affected by data or structural changes.

• Static Branch Precomputation – Improve runtime by detecting and collapsing static branches in execution graphs.

• Expanded API docs and usage examples.

• Guides for building non-scripting tools like mind maps, audio tools, or ML visualizers.

• 🤖 Node Configuration State Machine – Dynamically add or remove ports and fields on nodes at runtime, allowing node structure to adapt automatically based on current links and input data.

• 🧑‍🤝‍🧑 Node Grouping – Enable users to select multiple nodes and group them together for easier organization, movement, and management within complex graphs.

• ♻️ Reusable Graph Macros – Allow users to define, save, and reuse templates or functions made up of multiple nodes, streamlining the creation of common patterns and workflows.

• 🎩 Enhanced Editor Mode – Introduce advanced, opt-in editing tools and keyboard shortcuts to improve productivity and provide a more powerful graph editing experience.

For a fast and easy setup, check out our Quickstart Guide. It covers the basics to get you up and running with FlNodes in no time!

To add FlNodes to your Flutter project, include it in your pubspec.yaml:

dependencies:
fl_nodes: ^latest_version

Then, run:

flutter pub get

Import the package in your Dart file:

import 'package:fl_nodes/fl_nodes.dart';

For full implementation details, check out the examples below.

Explore fully working examples:

• 📄 Code Example
• 🌍 Live Example

Legend:

• ✅ Supported
• ❌ Unsupported
• ⚠️ Partial
• 🧪 Untested

FlNodes is open-source and released under the MIT License. Contributions are welcome!

We’d love your help in making FlNodes even better! You can contribute by:

• 💡 Suggesting new features

• 🐛 Reporting bugs

• 🔧 Submitting pull requests

• 👏 Sharing what you've built

Feel free to file an issue or contribute directly on GitHub.

Enjoy using FlNodes and create amazing node-based UIs for your Flutter apps! 🌟