Flutter_cached_network_image: cached_network_image cornerRadius?

[port3000]

I want to create a circle image using CachedNetworkImage.
Is there any way to make it possible?
Thanks.

[renefloor]

The CachedNetworkImage currently doesn't support it. You could use the CachedNetworkImageProvider directly for the caching mechanism, but you will miss the error and placeholder functionality.

I haven't tried it, but something like this should work:

        new Container(
          width: 100.0,
          height: 100.0,
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            backgroundColor: Theme.of(context).primaryColor,
            backgroundImage: new BackgroundImage(
              image: new CachedNetworkImageProvider (url),
            ),
          ),

[buntagonalprism]

Another option is to use CachedNetworkImage inside a ClipRRect (for a rectangle with rounded corners) or a ClipOval (for a circle or oval shape) widget. Using BoxFit.cover or another box fit may be necessary if the shape of the image being loaded is different to the shape it is supposed to fill - otherwise you might not see the rounded corners.

new ClipRRect(
  borderRadius: BorderRadius.circular(4.0),
  child: new CachedNetworkImage(
    imageUrl: url,
    height: 96.0,
    width: 96.0,
    fit: BoxFit.cover,
    placeholder: Icon(
      Icons.person,
      size: 96.0,
    ),
  ),
),

[renefloor]

Decided that something like ClipRRect should be the way to go.

[aytunch]

This does not work properly when the image is not perfectly square. Having a rounded outline should be embedded in the library imho.

[theochampion]

@renefloor isn't ClipRRect and ClipOval relatively expensive for this task?