Flutter Network Image does not fit in Circular Avatar

I am getting images from an API call. I want the images to be displayed in Circular profile form so I am using CircleAvatar Widget, but I keep getting images in square format. Here is a screenshot of images.

Here is the code I am using.

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

I tried using all the properties of BoxFit like cover, contain, fitWidth, fitHeight etc but none of them works.

You need to use backgroundImage: property in order to fit it in Circle.

CircleAvatar(
              radius: 30.0,
              backgroundImage: NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
              backgroundColor: Colors.transparent,
)
1 Like

@pkrawat1 thanks for your reply.

If you don’t want to use CircleAvatar , here is how you can do it too.

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),
1 Like