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

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(Colors.blue),
            ),
          ),
          errorWidget: (context, url, error) => Icon(Icons.error),
        )),
      ),
    ),
  ));