https://github.com/williamkaroldicioccio/fl_nodes
A fully customizable, lightweight, and scalable node-based editor for Flutter.
https://github.com/williamkaroldicioccio/fl_nodes
dart flutter node-editor visual-scripting
Last synced: over 1 year ago
JSON representation
A fully customizable, lightweight, and scalable node-based editor for Flutter.
- Host: GitHub
- URL: https://github.com/williamkaroldicioccio/fl_nodes
- Owner: WilliamKarolDiCioccio
- License: mit
- Created: 2024-12-09T22:16:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T11:17:55.000Z (over 1 year ago)
- Last Synced: 2025-04-09T21:13:52.690Z (over 1 year ago)
- Topics: dart, flutter, node-editor, visual-scripting
- Language: Dart
- Homepage: https://williamkaroldicioccio.github.io/fl_nodes/
- Size: 7.68 MB
- Stars: 76
- Watchers: 2
- Forks: 9
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# **FlNodes**
🚧 **Note:** **FlNodes** is in its early stages. While the core functionality is
in place, we're actively improving performance, adding features, and refining
the experience. Your feedback and contributions are invaluable in shaping its
future! 🚀
---
## 🚀 **A Fully Customizable Node-Based Editor for Flutter**
**FlNodes** is a lightweight, scalable, and highly customizable package that
empowers Flutter developers to create dynamic, interactive, and visually
appealing node-based UIs.
With **FlNodes**, you can build:
- 🎮 **Visual Scripting Tools** – Drag-and-drop logic editors for game
development and automation.
- 🛠 **Workflow & Process Editors** – Task automation, decision trees, and
business process modeling (BPMN).
- 🎨 **Shader & Material Editors** – Custom shader graphs like Unity Shader
Graph or Unreal Engine’s Material Editor.
- 📊 **Data Flow & Pipeline Managers** – Complex data transformations, ETL
workflows, or AI model pipelines.
- 🤖 **AI & Machine Learning Visualizers** – Node-based interfaces for neural
network architectures or training workflows.
- 🔊 **Audio & Music Generators** – Modular synthesizers, audio effect chains,
and interactive music tools.
- 🏗 **Graph-Based UIs** – Mind maps, dependency graphs, knowledge graphs, and
hierarchical structures.
Whether you're building tools for developers, designers, or end-users,
**FlNodes** gives you the building blocks to make it happen! 🚀
---
## 🌟 **Features**
Inspired by Flutter’s **no-compromises** philosophy, **FlNodes** offers:
- ✅ **Fully Customizable UI** – Tailor the editor to match your app's design.
- 💾 **Fully Customizable storage** - The editor converts the project to JSON
and provides callbacks for actual storage.
- ⚡ **High Performance** – Optimized rendering for smooth interactions.
- 🔗 **Flexible Node & Connection System** – Create complex graph structures
with ease.
- 📏 **Scalable Architecture** – Handles everything from simple node diagrams to
massive, interconnected graphs.
- 🎨 **Beautiful & Lightweight** – Minimal overhead, ensuring a seamless user
experience.
---
## 🔧 **Roadmap / TODO**
We're actively working on improving **FlNodes**! Here are some planned features:
- **🔄 Dynamic Node Parameters** – Add/remove parameters dynamically for better
flexibility.
- **⚡ Static Branch Precomputation** – Detect static branches and precompute
them for faster execution.
- **🩺 Surgical Rebuilds** – Rebuild only affected nodes when dependencies
change.
- **📦 Node Grouping** – Organize nodes into groups that can be moved and
managed together.
- **♻️ Macros/Functions** – Define reusable node collections that expand at
graph build time.
Click [here](https://hackmd.io/@l7G0TmToRX-GFgwRUOHloA/Byi53IwFyx) for a quick
detailed and updated TODO list for the project.
---
## 📸 **Screenshots**
---
## 📚 **Quickstart Guide**
For a fast and easy setup, check out our
[Quickstart Guide](https://github.com/WilliamKarolDiCioccio/fl_nodes/blob/main/QUICKSTART.md).
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`:
```yaml
dependencies:
fl_nodes: ^latest_version
```
Then, run:
```bash
flutter pub get
```
---
## 🛠️ **Usage**
Import the package in your Dart file:
```dart
import 'package:fl_nodes/fl_nodes.dart';
```
For full implementation details, check out the examples below.
---
## 🧩 **Examples & Demo**
Explore fully working examples:
- 📄
**[Code Example](https://github.com/WilliamKarolDiCioccio/fl_nodes/blob/main/example/lib/main.dart)**
- 🌍 **[Live Example](https://williamkaroldicioccio.github.io/fl_nodes/)**
---
## 📜 **License**
**FlNodes** is open-source and released under the [MIT License](LICENSE.md).
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](https://github.com/WilliamKarolDiCioccio/fl_nodes/discussions/49)
Feel free to file an issue or contribute directly on
[GitHub](https://github.com/WilliamKarolDiCioccio/fl_nodes).
---
## 🚀 **Let’s Build Together!**
Enjoy using **FlNodes** and create amazing node-based UIs for your Flutter apps!
🌟