CODEWITHSUNDEEP
flutter
live-love
live-love

Reputation: 52534

CircleAvatar with IconButton not centered

I want to center the button in the CircleAvatar, but for smaller radius, it doesn't seem to be centering correctly.

                 CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 16,
                    child: IconButton(
                        icon: Icon(Icons.add),
                        color: Colors.white,
                        onPressed: () {

                          }
                        }),
                  ),

This is what it looks like:

enter image description here

Upvotes: 2

Views: 1913

Answers (3)

Jitesh Mohite
Jitesh Mohite

Reputation: 34270

CircleAvatar generally we used for displaying image, we can have some better option like material button

   MaterialButton(
              onPressed: () {},
              color: Colors.blue,
              textColor: Colors.white,
              child: Icon(
                Icons.add,
                size: 16,
              ),
              shape: CircleBorder(),
            )

Output:

enter image description here

Upvotes: 0

srikanth7785
srikanth7785

Reputation: 1522

You can use floatingActionButton to achieve that

Container(
  child: floatingActionButton(
    child: Icon(Icons.add),
  ),
),

Hope it helps..!

Upvotes: 1

timilehinjegede
timilehinjegede

Reputation: 14053

The IconButton has some default padding, fix the issue by removing the default padding. Check the code below, it works perfectly.

CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 16,
          child: IconButton(
            // remove default padding here
            padding: EdgeInsets.zero,
            icon: Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          ),
        ),

Output of the code: enter image description here

Upvotes: 10

Related Questions