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 im

Answer 1

                    CachedNetworkImage(
                        placeholder: (context, url) => Center(
                              child: CircularProgressIndicator(),
                            ),
                        errorWidget: (context, url, error) =>
                            new Icon(Icons.error),
                        imageBuilder: (context, imageProvider) => Container(
                            width: 60.0,
                            height: 60.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                    image: imageProvider,
                                    fit: BoxFit.contain))),
                        fit: BoxFit.contain,
                        imageUrl:
                            "${Constants.MEDIA_LINK}${state.review.company.logo}"),

Answer 2

In this case you can use :

CircleAvatar(
  radius: 50.0,
  backgroundImage: NetworkImage("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),
)

or

CircleAvatar(
  radius: 50.0,
  backgroundImage: AssetImage("assets/images/profile.jpg"),
)

working correctly...

Answer 3

Use combination of width/height, fit and wrap image in ClipOval like below:

CircleAvatar(
    child: ClipOval(
        child: Image.network(
            _photo,
            width: 120,
            fit: BoxFit.fill
        ),
    ),
    radius: 50,
),

Answer 4

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

Answer 5

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

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

Answer 6

in this solution you can resize the image by container and clip image by clip Oval then add shadow to the image by card.

Container(
  width: 100,
  height: 100,
  child: InkWell(
    onTap: () {},
    child: Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        side: BorderSide(color: Colors.grey),
        borderRadius: const BorderRadius.all(
          Radius.circular(45.0),
        ),
      ),
      child: Container(
        child: ClipOval(
            child: CachedNetworkImage(
          imageUrl: '{image-url}',
          imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.fill,
              ),
            ),
          ),
          placeholder: (context, url) => Container(
            height: 5,
            width: 5,
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            ),
          ),
          errorWidget: (context, url, error) => Icon(Icons.error),
        )),
      ),
    ),
  ));