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

Kakiang · Accepted Answer · 2019-06-05 14:55:49Z

120

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.

answered Jun 5, 2019 at 14:55

Kakiang

1,2172 gold badges8 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

This solution will only work with a square picture, as otherwise, the CircularProgressIndicator will have the same ratio as the picture.

Roman Soviak Over a year ago

error widget will be not circled

creativecreatorormaybenot · Accepted Answer · 2018-06-28 17:15:19Z

41

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.

edited Jun 28, 2018 at 17:15

answered Jun 20, 2018 at 10:12

creativecreatorormaybenot

128k66 gold badges318 silver badges428 bronze badges

6 Comments

dshukertjr Over a year ago

Thank you for you answer! I tried both of your answer; the first one worked, but the latter example did not work... Still getting the same error: The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'DecorationImage'.

dshukertjr Over a year ago

@creativecreatormaybenot I actually did copy it the way you told me to do so as in the edit, but still did not work.

creativecreatorormaybenot Over a year ago

@dshukertjr Yes, screw me, I messed that up. You need to pass the CachedNetworkImage as the child to the Container. I updated that in the answer.

dshukertjr Over a year ago

@creativecreatormaybenot Thanks! Everything works now!

aytunch Over a year ago

This does not work with rectangular images. even with fit: BoxFit.cover

|

dshukertjr · Accepted Answer · 2019-04-06 10:27:30Z

26

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

edited Apr 6, 2019 at 10:27

answered Dec 5, 2018 at 0:40

dshukertjr

19.2k11 gold badges71 silver badges101 bronze badges

10 Comments

Udit Over a year ago

Instead of using ClipRRect (which is basically used for rounded corners rectangle), you should probably be using ClipOval

aytunch Over a year ago

This does not work with rectangular images even with fit: BoxFit.cover

dshukertjr Over a year ago

@aytunch I would be happy to see your code if you could post it to stack overflow

Samer Over a year ago

How is this the accepted answer! ClipOval does not look like a perfect circle!

dshukertjr Over a year ago

@SamersSalib When you have the width and height equal to each other, it will.

|

furier · Accepted Answer · 2020-03-27 21:22:41Z

13

The combination of CircleAvatar and CachedNetworkImageProvider solves your problem. Here is an example:

CircleAvatar(
  backgroundImage: CachedNetworkImageProvider(
  'https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg',
  ),
),

edited Mar 27, 2020 at 21:22

furier

1,9771 gold badge22 silver badges39 bronze badges

answered Oct 8, 2019 at 17:32

heisenberg91

1,6062 gold badges13 silver badges16 bronze badges

Comments

malik kurosaki · Accepted Answer · 2020-10-12 04:08:05Z

8

in my case this save my time , mybe you too.

CachedNetworkImage(
  imageUrl: url,
  errorWidget: (context, url, error) => Text("error"),
  imageBuilder: (context, imageProvider) => CircleAvatar(
    radius: 50,
    backgroundImage: imageProvider,
   ),
  );

answered Oct 12, 2020 at 4:08

malik kurosaki

2,07218 silver badges9 bronze badges

Comments

Paul · Accepted Answer · 2022-10-11 10:10:39Z

3

General solution for any dimension

A Solution for pictures with any dimension and corner radius:

Container(
   width: 100,
   height: 125,
   decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(34.0),
      color: Colors.grey,
   ),
   child: ClipRRect(
      borderRadius: BorderRadius.circular(34.0),
      child: CachedNetworkImage(
         imageUrl: "url",
         fit: BoxFit.cover,
         placeholder: (context, url) => Center(
            child: SizedBox(
               width: 40.0,
               height: 40.0,
               child: new CircularProgressIndicator(),
            ),
         ),
         errorWidget: (context, url, error) => new Icon(Icons.error),
      ),
   ),
),

edited Oct 11, 2022 at 10:10

answered Nov 7, 2021 at 14:06

Paul

1,9331 gold badge20 silver badges32 bronze badges

2 Comments

rranj Over a year ago

This is the perfect answer. Solves all the issues.

Mosa Dec 29, 2024 at 6:59

perfect thanks worked great

rphonika · Accepted Answer · 2021-11-03 23:00:24Z

It will work by using a Container and ClipRRect. Here is an example:

Container(
  width: 160,
  height: 160,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(80),
      child: CachedNetworkImage(
        fit: BoxFit.cover,
        imageUrl: '[YOUR URL]',
        errorWidget: (
          context,
          url,
          error,
        ) =>
          const Icon(Icons.error),
        progressIndicatorBuilder: (
          context,
          url,
          downloadProgress,
        ) =>
          Center(
            child: CircularProgressIndicator(
              value: downloadProgress.progress),
            ),
          )
      ),
    ),

The width and height of your Container widget are important and both should be the same.

I hope that will be useful for others ;-)

Collectives™ on Stack Overflow

Create rounded cached image in Flutter

7 Answers 7

2 Comments

6 Comments

10 Comments

Comments

Comments

General solution for any dimension

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

6 Comments

10 Comments

Comments

Comments

General solution for any dimension

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related