flutterdartmobile-application

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

Solution

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