搜索插件、代码仓与 APP 分类

fl_nodes 封面
插件详情v0.5.0+1

fl_nodes

一个轻量、可扩展且高度可定制的包,使 Flutter 开发者能够创建动态、交互式且视觉上吸引人的基于节点的 UI。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
34
喜欢数
61
Pub 分数
130

安装插件

flutter pub add fl_nodes

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

fl_nodes 是一个轻量级且高度可定制的 Flutter 包,专为构建动态、交互式的节点化用户界面而设计。它使开发者能够轻松创建视觉上吸引人的图表和工作流,支持拖放节点、连接以及实时更新等功能。适用于需要可视化逻辑表示的应用程序,例如流程图、数据流水线或设计工具。该包具有良好的可扩展性,并可在所有主要平台上运行,包括移动设备、网页和桌面端。

适合场景

  • 创建交互式流程图
  • 构建数据管道可视化
  • 设计绘图工具
  • 实施工作流编辑器
  • 开发可视化编程界面

主要特点

  • 拖拽节点交互
  • 可自定义的节点和连接样式
  • 实时UI更新
  • 跨平台兼容性
  • 可扩展的架构
  • 可扩展的插件系统

适合对象

  • 使用 Flutter 的 UI/UX 设计师
  • 开发视觉编辑器的开发者
  • 教育类应用开发者
  • 工作流自动化工具
  • 数据可视化项目

使用建议

  • 需要理解基于节点的逻辑
  • 大型图可能需要性能优化
  • 样式自定义需要熟悉 Flutter 小部件
  • 有限的内置模板
  • 最适合中大型交互式图表

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

🏗️ FlNodes Framework

Dart Flutter Maintained Melos

Pub Downloads Likes Stars Repo Size

What do you think of badges? YES!

The FlNodes Framework is a modular, scalable ecosystem for building sophisticated node-based applications in Flutter. Designed for developers who need professional-grade visual editors, workflow tools, and graph-based interfaces, FlNodes provides a complete solution from low-level rendering to high-level abstractions.


  FlNodes Example

A screenshot from our visual scripting example app


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

🏗️ Framework Architecture

The FlNodes Framework is organized as a monorepo with specialized packages:

📦 Core Packages
  • fl_nodes_core – The engine that powers the FlNodes Framework.

  • fl_nodes – A proxy export package that maintains backward compatibility with earlier versions of the FlNodes framework.

🔌 Coming Soon
  • fl_nodes_visual_scripting
  • fl_nodes_mind_maps
  • fl_nodes_flow_graphs

📚 Getting Started

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!

If you're migrating from an earlier version, the fl_nodes package maintains backward compatibility while providing access to the new modular architecture.


📦 Installation

Choose the package that fits your needs:

dependencies:
  # For most users - high-level API with full features
  fl_nodes: ^latest_version

  # For advanced users needing low-level control
  fl_nodes_core: ^latest_version

Regardless of the package you choose you must add the following asset:

flutter:
  shaders:
    - packages/fl_nodes_core/shaders/grid.frag

Then, run:

flutter pub get

🧩 Examples & Demo

Explore fully working examples:


🕹️ 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 ✅ 🧪

🙌 Contributing

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


📜 License

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


🚀 Let's Build Together!

Enjoy using FlNodes and create amazing node-based UIs for your Flutter apps and/or get involved in library's development! 🌟

Made with contrib.rocks.

所属分类

依赖

依赖清单 4 项

源码仓库

使用此插件的项目

暂无相关数据。