CODEWITHSUNDEEP
flutterdartmobile-application
Bhavik Dalal
Bhavik Dalal

Reputation: 115

How to fit an image in a circle button properly in flutter?

The images I have been adding are not fitting properly in the circular shape. This is the image for reference

And this is the code for reference

      Container(
      child:Material(
        shape: CircleBorder(),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: InkWell(
          splashColor: Colors.black26,
          onTap: (){},
          child: Ink.image(
            image: AssetImage('assets/'+ Name),
            height: 60 ,
            width: 60,
          ),
        ),
      )
    ),Text(String),

Upvotes: 1

Views: 2001

Answers (3)

Hafiz Hamza
Hafiz Hamza

Reputation: 9

Here is the way. Image will not crop and adjust in the center of the circle properly.

  Container(
              height: 80,
            width: 80,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blue,width: 2),
                color: Colors.white,
                shape: BoxShape.circle
            ),
            child: Image.asset('assets/yourImagepath',fit: BoxFit.contain,)),

Upvotes: 0

Prashant
Prashant

Reputation: 676

Use fit property of Ink.child

1st way : Use fit: BoxFit.cover, for center cropped image

Or else

2nd way : Use fit: BoxFit.fill, to stretch the image

Container(
      child:Material(
        shape: CircleBorder(),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: InkWell(
          splashColor: Colors.black26,
          onTap: (){},
          child: Ink.image(
            image: AssetImage('assets/'+ Name),
            fit: BoxFit.cover, //Add this line for center crop or use 2nd way
            height: 60 ,
            width: 60,
          ),
        ),
      )
    ),Text(String),

Upvotes: 2

Alwayss Bijoy
Alwayss Bijoy

Reputation: 844

I guess you can use CircleAvatar

here is the demo code

CircleAvatar(
                radius: 20.0,
                child: ClipOval(
                    child: Image.network(
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0sCAvrW1yFi0UYMgTZb113I0SwtW0dpby8Q&usqp=CAU')),
              ),

though I can't open your example image, I guess if you use Circle Avatar it will work

Upvotes: 1

Related Questions