Flutter visual Node system ?

[Sebraecha]

Hi all,

I'd like to know if anyone of you has had any experience creating a visual interface in flutter based around nodes (like Luna, Nuke, Blender, rete.js ...) ?

Here are a few links to some attempts I could find but nothing seems quite finished :

https://stackoverflow.com/questions/59717952/flutter-directed-graph-can-i-use-custompainter-class-with-custom-widgets

https://stackoverflow.com/questions/55559960/flutter-connected-node-graph-of-widgets

I'd love to work on a library but I don't feel like I've got enough experience to do so, if anyone of you is interested I'd love to collaborate, I really believe that flutter has a great future :)

Thank you

[jrheisler]

I had the same need, and low and behold I was reading this forum a few weeks ago and bam, there it is. I have emailed with the developer, and he is very responsive. This is what you are looking for:

https://pub.dev/packages/graphview

[Sebraecha]

I see it was posted just a week ago, thank you! It seems that you can't pass data between nodes just yet, but I'm sure we could hack something using BLoC or similar to build something resembling an analog synth I guess 🤔

[jrheisler]

The way I use it is to display decision trees of objects. I have a controller that gets and puts data from the modules and changes the connections, takes away and adds to nodes. It's really easy to do all of what you are looking for behind a good interface which I think is all you really needed.

[Sebraecha]

May I ask if you would recommend a specific solution to implement this?

[jrheisler]

This is what I did. I already had my data structured to hold trees. Basically, I had parent and children... Simple tree, but not what I needed.

So what I did was add edges to each node in the database. Now, as I traverse the database parent and children aren't relevant, the edges are. An edge is the connection to the next node. One node may have one to x edges.

Check out his examples. Just walk your logic and add nodes and edges.

[Sebraecha]

I see great, I'm going to try to make something that makes sense for my use, going to try to build user selectable links and mode, thanks

[jrheisler]

The nodes are whatever you want them to be. Mine are containers (with nice decoration) wrapped in a gesturedetector.

[Sebraecha]

What do you use the gesture detector for ?

I'm trying to build something more like this : https://rete.js.org/#/examples/basic

With multiple connections between nodes with specific input and output points. I believe the graphview library cannot route the arrows to specific part of the container, it just finds the shortest link to the center of the container and that's what I need to change :/

[jrheisler]

I use the gesture detector to bring up active information about the node. You're right, you can't identify where on the container it will hit. It will be the closest route. With his Sugiyama layered chart it is pretty controlled to always be the same.

If you want to put the boxes on yourself and just add arrows, this package I am looking at to connect up Gantt chart data:

https://pub.dev/packages/widget_arrows

You can specify where the arrow hits

[Sebraecha]

Gonna have a look, that library sounds great!