FlNodes

🚀 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.

---

🚀 A Fully Customizable Node-Based Editor for Flutter

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

💡 Use Cases

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.

---

🌟 Features

• ✅ 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.

---

🛠 Roadmap

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

🐛 Bug Fixes & Community Feedback

• 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.

⚙️ Performance Enhancements

• 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.

📚 Documentation Improvements

• Expanded API docs and usage examples.

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

🎛 General-Purpose Flexibility

• 🤖 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.

---

📸 Screenshots

 

---

📚 Quickstart Guide

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!

---

📦 Installation

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

dependencies:
fl_nodes: ^latest_version

Then, run:

flutter pub get

---

🛠️ Usage

Import the package in your Dart file:

import 'package:fl_nodes/fl_nodes.dart';

For full implementation details, check out the examples below.

---

🧩 Examples & Demo

Explore fully working examples:

• 📄 Code Example
• 🌍 Live Example

---

🕹️ Current input support

Legend:

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

🖥️Desktop and 💻 laptop:	Windows	Linux	macOS
native/mouse	✅	✅	✅
native/trackpad	✅	⚠️	✅
web/mouse	✅	✅	✅
web/trackpad	❌	❌	❌

📱Mobile	Android	iOS
native	✅	❌
web	❌	🧪

---

📜 License

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

---

🙌 Contributing

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.

---

🚀 Let’s Build Together!

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