flutterflutter-positionediconbutton

Why CircleAvator's position can't align exactly under The IconButton?


created a IconButton and positioned it responsively. And then wrapped it with CircleAvator widget. I was expecting the circleavator would be placed under the IconButton and also would behave responsively but CircleAvator doesn't align under the button even doesn't act responsively. Here is my code-

Positioned(
                    left: (_width / 2.4) - (_height / 3.5 * 0.30),
                    top: (_height * 0.5) / 2.35,
                    child: CircleAvatar(
                      backgroundColor: colorBlack,
                      radius: 50.0,

                      child: IconButton(
                          icon: Icon(Icons.check_circle),
                          iconSize: _height / 3.5 * 0.5,
                          color: loading ? Colors.teal : Colors.red,
                          onPressed: doConversion),
                    ),
                  ),

Here is my output of Device - enter image description here


Solution

  • To stack 2 Widgets there is actually an easier solution. Just use the Stack Widget. You can use alignment to position the element within the Stack.

     Stack(
            alignment: Alignment.center,
            children: <Widget>[
              CircleAvatar(
                backgroundColor: Colors.black,
                radius: 50.0,
              ),
              IconButton(
                  icon: Icon(Icons.check_circle),
                  iconSize: 100,
                  color: Colors.red,
                  onPressed: () {}),
            ],
          )
    

    Before Using Stack