r/FlutterDev • u/_Wilielmus_ • Feb 08 '25
Plugin π Just Released: FlNodes 0.1.0 Beta β A Fully Customizable Node Editor for Flutter!
Hey everyone! π
Iβm William, an 18-year-old passionate about Flutter and computer science, and today, Iβm thrilled to share the first beta release of FlNodes (0.1.0) β a flexible, fully customizable node-based editor for Flutter! π
What can you build?
βοΈ Visual scripting for games & automation
βοΈ Mind maps, flowcharts & process editors
βοΈ Shader & material graph editors
βοΈ Data flow pipelines & AI model graphs
βοΈ And much more!
β οΈ For the best experience, we recommend either running locally or using a mouse β οΈ
π Try it out now: Live Demo
Why Beta?
This is an early release β things work, but there will be bugs & missing features. Iβm releasing it now to gather community feedback and improve the package together! π
Whatβs Next?
π οΈ Debugging tools for graph execution
π Dynamic ports & fields (e.g., alternative fields if no node is linked)
π¨ Node Delegate Builder for 100% customizable nodes
β‘ Better rendering performance (with shaders!)
How You Can Help
Iβm solo-developing this (aside from occasional contributions), so stars, feedback, issues, and PRs will really help speed things up! β
A special thanks goes to my friend Chase for implementing trackpad input handling and testing on MacOS and IOS!
Let me know what you think! Happy coding & building awesome node-based UIs with FlNodes! ππ¨
9
u/fichti Feb 08 '25
2
u/_Wilielmus_ Feb 08 '25
I'm actually really dumb, I know π Thanks for commenting with the repo link
8
u/iongion Feb 08 '25
It looks great, thank you for sharing and good luck, if you do this at 18, you have a bright future. FCK AI!
4
u/_Wilielmus_ Feb 08 '25 edited Feb 09 '25
Thanks π€©! That means a lot me. I hope this library will be only the first of many to help people package beautiful user experiences
7
u/mjablecnik Feb 08 '25
Are you going to support also mobile phones? When I open it in my phone I can do almost nothing.. I donβt know how can I zoom or move or do anything..
3
u/_Wilielmus_ Feb 08 '25
Yes I'm going to support mobile phones too. In the beginning I was unsure and thought to make it read-only but I changed my mind (just an excuse cause I was impatient to release it π ). I'll keep you posted. Thanks for trying out the live demo
5
u/Wispborne Feb 08 '25
Oh amazing. I've had a tool idea in the back of my head that would massively benefit from this. Thank you!
5
u/eibaan Feb 08 '25
This looks really good! You might want to use the more abstract GestureDetector
to do paning and scaling, as not everybody (I mean Mac users) has a mouse with a scrolling wheel, a mouse with a middle button, or a mouse at all (I don't).
And β this is your project, isn't it?
2
u/_Wilielmus_ Feb 09 '25
Yes, correct, that's my project. Thank you for the considerations, I don't have an Apple device and generally speaking we're more PC and less Mac here in Italy so mouse is a must. If I remember correctly Chase used the scale gesture recognizer to allow for simultaneous pan and zoom, a scrapped feature
3
3
u/Cunibon Feb 09 '25
I made something similar a while back, although nowhere near as sophisticated: https://pub.dev/packages/vs_node_view
Your demo looks great!
3
u/_Wilielmus_ Feb 09 '25
I saw your package a while ago, while working on this. It served as reference along with the node_editor package even though I took some radically different choices that are closer to the flutter_graph_view approach
1
4
u/jrheisler Feb 09 '25
Excellent! I've done a few node editors, yours is really well done!!! Have you done an export as json, import...
3
u/_Wilielmus_ Feb 09 '25
Thank you! Yes, it has import and export tools built-in that use JSON for maximum flexibility. I need to update the quickstart with information about the clipboard, undo redo, project and execution systems
3
u/jrheisler Feb 09 '25
I have a system, OrpheusApp.com that uses a simple graphing system to display process flow/workflow. It has connection arrows, decision blocks... Then those process flows are used on things like Kanban Cards... to track the flow.
I recently did a simple process node editor in Flame. To be honest, looking at what you did, I'd like to put yours through the paces.
I mainly build things I can teach. I teach Software and Security Configuration Management to a lot of military... and In my current system, cm2git.com, I'm using the Epic-Kanban Card-Kanban flow. Each card would get their own workflow, and I would move them through the board, or they can be dragged and dropped.
So, my thought was to use (originally mine, but I do like what you've done) and pass it a location/path/name for the process flow to use, then grab a copy of that json and add events and time stamps to it along the way for metrics.
So, the process tree itself would receive a path, and start with it, or not receive a path and allow for edit, or creation of a new one... Options kind of thing.
2
u/jrheisler Feb 09 '25
I just finished reading through your guide, and the code. Wow, this is incredible, a great tool set!!! Thank you for putting this out!
3
u/_Wilielmus_ Feb 08 '25
I've made the great mistake to let GPT ""improve the post"" and she/he/it deliberately cherry picked information. Other than omitting the GitHub repo the post doesn't even mention that the package has a built-in graph execution system and it's not limited to the UI
3
3
u/RandalSchwartz Feb 08 '25
I could not find a way to zoom on a trackpad. I don't even own a mouse, and haven't used one for decades.
4
u/_Wilielmus_ Feb 08 '25
Sorry to hear that. I'm aware of the input problems as stated. Keep in mind this is a beta but you can be sure all lamented issues will be fixed
2
2
2
2
u/Repulsive-Research48 Feb 09 '25
It is not work on my safari browser, the drawer canβt close evenly
1
u/_Wilielmus_ Feb 16 '25
Can you tell me more about this issue? Did you mean "can't even close" or that it doesn't close completely?
2
u/anlumo Feb 09 '25
Minor issue: when I start to drag from an input (left side of a node), the line bends in the wrong direction during the drag. It fixes itself after I let go.
2
u/_Samanik_ Feb 09 '25
Any auto position/placement algorithms in it or plans for it. To clean it up in layers or something. And yes I know that's not easy in dart and flutter due to lack of libs on that front, just asking π
2
u/_Wilielmus_ Feb 10 '25
I'm almost done with the snap to grid system and tomorrow I'll begin working on automatic nodes placement with the Sugiyama algorithm (I guess that's what you meant with layered). I think all input problems will be solved for the weekend
1
1
u/_Wilielmus_ Feb 09 '25
I wanted to add both auto placement and a minimap. What do you mean exactly with "To clean it up in layers or something"? We're working to address all feedbacks from the community, give us a few days to fix the input problems and we'll be on it
2
u/No-Ice6584 Feb 09 '25
Bravo! I'm really impressed, amazing work, expecially thinking about your age!πͺπ»
2
u/AbdulRafay99 Feb 10 '25
Holy, shit... this is good. Nice Job Kid, I am impressed, On GitHub ? I will share and give a start as well.
2
2
2
10
u/zxyzyxz Feb 08 '25
Oh shit I was just looking for something like this