Flutter Network Image does not fit in Circular Avatar

Question

I am trying to retrieve bunch of images from an api. I want the images to be displayed in Circular 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 tryied using all the properties of BoxFit like cover, contain,fitWidth,fitHeight etc but none of them works.

Answer 1

This Will Work : 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,
              )

To Check with Dummy Placeholder:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )