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

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

CodePudding user response：

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

CodePudding user response：

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