My current approach is pretty straight forward you can refer the code and image too.
I am thinking to use GlobalKey to get the connecting width between the children and using Positioned widget can position it accordingly.
Could you suggest a better approach to connect the children widgets.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
getCircle(bottomFlag: true),
Column( // stack
children: [
Container( // inside positioned
height: 5,
width: 280, // distance between 1 and 3 through GlobalKey
color: Colors.orange,
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
getCircle(topFlag: true), //1
Row(
children: [getCircle(), getCircle()],
),
],
),
getCircle(topFlag: true), //2
getCircle(topFlag: true), //3
],
),
],
)
],
)
I am attaching the image of widgets UI [1]: https://i.stack.imgur.com/E9Cyb.png