flutter icon is not centered in container

Question

I was trying to center the icon in a circular background but it failed even if I use a center widget as child unless increase container size.


    Container(
                  height: 22,
                  width: 22,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffF7825C),
                  ),
                  child: Center(
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                    ),
                  ),
                )

score 4 · Accepted Answer · answered Jan 29 '21 at 06:48

4

Try this:

             Container(
              alignment: Alignment.center,
              height: 22,
              width: 22,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Color(0xffF7825C),
              ),
              child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 22 
                ),
            )

answered Jan 29 '21 at 06:48

BosS

447
2
9

it worked for ,e while placing a size to the icon . – A.K.J.94 Jan 29 '21 at 07:50

score 1 · Answer 2 · answered Jan 29 '21 at 06:22

1

You need to set the size of your icon with size attribute, so your Icon widget should look like this

Icon(
    Icons.add,
    color: Colors.white,
    size: 22
)

answered Jan 29 '21 at 06:22

Yunus Karaaslan

184
1
3
12

1

at last I solved it by changing it to a CircleAvatar widget so it align center with out any hassle, – A.K.J.94 Apr 19 '21 at 06:32

score 1 · Answer 3 · answered Jan 29 '21 at 06:45

You can also use RawMaterialButton, You can set it like this

RawMaterialButton(
              onPressed: () {},
              fillColor: Color(0xffF7825C),
              child: Icon(
                Icons.add,
                size: 22.0,
                color: Colors.white,
              ),
              shape: CircleBorder(),
            )

score 0 · Answer 4 · answered Oct 15 '22 at 13:11

Issue can be solve by giving size to Icon

Container(
    width: 40,
    height: 20,                  
    child: Icon(
        Icons.arrow_right_alt_outlined,
        color: Colors.white,
        size: 20,),
    ),

the above thing works because now we have the container which can contain whole icons size ( 40x20(container) can contain 20(icon)) but if this icons size gets bigger than container dimension there we meshed up the centering of icon inside container

hope this explanation works!

score -2 · Answer 5 · answered Jan 29 '21 at 06:24

use the following :

Container(
              height: 22,
              width: 22,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Color(0xffF7825C),
              ),
              alignment: Alignment.center,
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              
            )

flutter icon is not centered in container

5 Answers5