How to keep position of widget

Issue

I’m trying to add animation to letters as you can see below. The problem I’m facing is that, when I change the size of the selected letter, other elements are moving. I could not find a way to keep the position of the other letters. Any ideas?

return Container(
        color: Colors.orange,
        padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
        child: RowSuper(
            alignment: Alignment.center,
            innerDistance: -20,
            children: [
              nodes[0],
              ColumnSuper(
                alignment: Alignment.center,
                innerDistance: -5,
                children: [
                  nodes[1],
                  nodes[2],
                ],
              ),
              nodes[3],
            ]));

return TweenAnimationBuilder(
        tween: Tween<double>(begin: 0, end: 1),
        duration: Duration(milliseconds: 2000),
        builder: (BuildContext context, double _val, Widget child) {
          return Opacity(
            opacity: _val,
            child: HiveNode(
                index: index,
                child: Container(
                    height: _val * size,
                    width: _val * size,
                    decoration: ShapeDecoration(
                      color: nodeColor,
                      shape: PolygonBorder(
                          sides: 6,
                          rotate: 90.0,
                          borderRadius: 8.0,
                          border: BorderSide(color: Colors.grey, width: 0.1)),
                      shadows: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.6),
                          spreadRadius: 0,
                          blurRadius: 7,
                          offset: Offset(-3, 6), // changes position of shadow
                        ),
                      ],
                    ),
                    child: Center(
                      child: Text(char,
                          style: TextStyle(
                              fontSize: 34,
                              fontWeight: FontWeight.bold,
                              color: textColor)),
                    ))),
          );
        });

Solution

I could solve with Stack approach. Here is the answer if anybody needs something similar in future.

return Container(
        color: Colors.orange,
        width: 360,
        height: 400,
        child: Stack(
          alignment: Alignment.center,
            children: [
              Positioned(left:0, top:80, child:  nodes[0]),
              Positioned(left:0, bottom:80, child: nodes[1]),

              Positioned(top:20, child: nodes[2]),
              Positioned(left:120, top:140, child: nodes[3]),
              Positioned(bottom:20, child: nodes[4]),

              Positioned(right:0, top:80, child: nodes[5]),
              Positioned(right:0, bottom:80, child: nodes[6]),
            ],
        )
    );

Answered By – penguru

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)