Problems implementing a visual programming editor

[Carmelo Juanes Rodríguez]

Hi guys, I am trying to build a visual programming editor with flutter. The user has to be able to add nodes, connect nodes, edit node properties and other related stuff. I have done some experiments with Stack and CustomPaint but I've stucked with two problems:

1. I want to implement zoom+translation canvas feature in order to provide a great UX so I wrap my Stack with a Transform widget but when I move the nodes outside the Stack boundaries their GestureDectector stop working and it does not detect gestures.

2. I want to draw lines to represent the connections of the different nodes from the node output socket to the node input socket. But I think it is very difficult to get the exact position of the socket (they are not always on the same position. their position depends of the type of node) in order to use them in my CustomPainter. I think I can do something with context.findRenderObject() but it seems very complicated.

Here is a simplified version of the code: https://codepen.io/melojr/pen/eYJqXWq

You can create new nodes clicking in the canvas, zoom in/out with wheel scroll and translate the canvas and the nodes dragging them. In this version I draw the lines only to the node's center.

I would like to ask you some advice about how to implement this kind of stuff because I think that I'm doing something wrong. Thank you in advance