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

Question

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

score 0 · Accepted Answer · answered Jun 10 '20 at 17:08

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: () {}),
        ],
      )

Taba · Answer 2 · 2021-03-02T04:49:13.433

Actually when using the CircleAvatar() as the parent, it covers the child widget to a certain size and as the child gets more size than a certain amount (about 70%) it cant wrap the child as expected and starts shifting the child to bottom right. And also the IconButton() has a preset padding about 6 or 8 which you can set it to 0 by defining the padding property yourself like this padding: EdgeInsets.all(0.0),. So addition to the @Benedikt J Schlegel answer I suggest 2 more shots you can try:

Set the IconButton() padding to 0 and never pass the child a size more than 170% of the parent:

        Positioned(
            left: (_width / 2.4) - (_height / 3.5 * 0.30),
            top: (_height * 0.5) / 2.35,
          child: CircleAvatar(
            backgroundColor: Colors.black,
            radius: 100.0,

            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                  icon: Icon(Icons.check_circle),
                  padding: EdgeInsets.all(0.0),
                  iconSize: 170,
                  color: Colors.red,
                  onPressed: (){}
              ),
            ),
          ),
        ),

User a Container() as the parent of the IconButton():

  Positioned(
    left: (_width / 2.4) - (_height / 3.5 * 0.30),
    top: (_height * 0.5) / 2.35,
    child: Container(

      decoration: BoxDecoration(
        color: Colors.black,
        shape: BoxShape.circle,
      ),

      child: IconButton(
          icon: Icon(Icons.check_circle),
          padding: EdgeInsets.all(0.0),
          iconSize: 100,
          color: Colors.red,
          onPressed: (){}
      ),
    ),
  ),

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

2 Answers2