Create rounded cached image in Flutter

Question

I want to create a circle image where the image is fetched from the network and is also cached in Flutter.

Here is a code I found for a round image fetched from the network but the image not being cached.

new Container(
    width:80.0,
    height: 80.0,
    decoration: new BoxDecoration(
    shape: BoxShape.circle,
        image: new DecorationImage(
            image: new NetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
        ),
    ),
),

Now I found a widget for fetching, caching and presenting a image from the network

new CachedNetworkImage(imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg')

But when I replace the NetworkImage widget with this CachedNetworkImage, it gives me an error saying the NetworkImage is not type image.

How can I achieve a round image that can be cached?

Edited: I tried this as suggested in the answer, but still got the same error: The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'DecorationImage'.

              decoration: new BoxDecoration(
                shape: BoxShape.circle,
                image: new CachedNetworkImage(image: 
                      'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
              ),

Answer 1

The CachedNetworkImage has a builder (ImageWidgetBuilder) to further customize the display of the image. Try it this way:

CachedNetworkImage(
  imageUrl: 'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
  imageBuilder: (context, imageProvider) => Container(
    width: 80.0,
    height: 80.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: imageProvider, fit: BoxFit.cover),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

placeholder and errorWidget are widgets, which means you can put any widget in there and customize them as you wish.

Answer 2

DecorationImage takes an ImageProvider and not a widget.

There are two ways to solve this problem:

The cached_image_network provides a class that extends ImageProvider, i.e. CachedNetworkImageProvider:

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
    ),
  ),
)

You could also just omit the DecorationImage widget because the BoxDecoration will work on any widget:

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
  ),
  child: CachedNetworkImage('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
)

In the latter example, I am using the regular CachedNetworkImage, which will return a widget.

Answer 3

ClipOval widget is used to clip child widget into round shapes.

ClipOval(
  child: CachedNetworkImage(imageUrl: "https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg",
   width: 80.0,
   height: 80.0,
  ),
)