CODEWITHSUNDEEP
flutterwidgetflutter-layout
Neil P.
Neil P.

Reputation: 1114

Flutter Connected Node/Graph of Widgets

What would be the best approach to get started on creating something like this:

flutter-graph-layout

I could probably get the second & fourth rows created as horizontally scrolled lists, with the first & third rows as just a row with two cards; but how does one draw a line between or connecting two widgets?

Upvotes: 13

Views: 3108

Answers (1)

user10595057
user10595057

Reputation:

The only way i could think of creating such a view is a little complicated (may be iam wrong)Please enlighten me if someone know any packages or simple widgets or some other way to do it .

The core feature of flutter is reusability of code but sadly until now no one has created a GraphView the way i think of doing this is ... Iam not going to implement it here I'll certainly wouldve give it a try soon. Although I will Share the way i think of implementing it and the steps required to do so.

1) You have to build a container or any widget to hold whatever data there is in the node.

2) You have to find the coordinates of each of this nodes using a function say getOffset(). To do this I found a good youtube tutorial Video to find position and size of a widget. Its actually quite simple(after i saw the tutorial) you have to create a key for each node and pass it as the key parameter to the node widget and use the initstate funtion to create a function which uses the _newBox = _theKeyYouCreated.currentContext.findRenderObject() to find that object

3) Then use _newBox.localToGlobal(Offset.zero) to get the location of the object.

4)Now say you got all the location of the containers now just use this locations to draw some line between these container.If you want some more beautiful right angled straight line you can first go to through the y axis then draw the x axis(of course some extra distance to compensate for the width and heights of widgets is to be used)

5)Drawing lines between two co-ordinates is a pretty straight forward thing with 

canvas.drawLine(p1, p2, paint);

6)Now if you manage to do this for all pairs of nodes You are done.

Seems like a pretty lot of work.I think there are no packages that do this .But its certainly Time to make one. If you manage to to do this just make it in a reusable form and publish it .I'll certainly give a try to implement this after my current project.

Upvotes: 5

Related Questions