Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 days 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 (2 months ago)
- Default Branch: main
- Last Pushed: 2025-02-15T17:40:42.000Z (5 days ago)
- Last Synced: 2025-02-15T18:29:07.321Z (5 days ago)
- Topics: dart, flutter, node-editor, visual-scripting
- Language: Dart
- Homepage: https://williamkaroldicioccio.github.io/fl_nodes/
- Size: 6.2 MB
- Stars: 63
- Watchers: 1
- Forks: 6
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# **FlNodes**
🚧 **Note:** This is **version 0.1.0** of **FlNodes**, a newborn product 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
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! 🌟