CODEWITHSUNDEEP
flutterflutter-widgetflutter-container
A.K.J.94
A.K.J.94

Reputation: 552

flutter icon is not centered in container

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,
                    ),
                  ),
                )

Upvotes: 0

Views: 7671

Answers (6)

Taher Salah
Taher Salah

Reputation: 417

you can try this code :-

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 
                    ),
                )

Upvotes: 0

Brijesh Patadiya
Brijesh Patadiya

Reputation: 31

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!

Upvotes: 1

BosS
BosS

Reputation: 501

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 
                ),
            )

Upvotes: 5

Mittal Patel
Mittal Patel

Reputation: 6089

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(),
            )

Upvotes: 2

Jay Dangar
Jay Dangar

Reputation: 3469

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,
                ),
              
            )

Upvotes: -2

Yunus Karaaslan
Yunus Karaaslan

Reputation: 304

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
)

Upvotes: 2

Related Questions