Flutter_cached_network_image: using placeholder on CachedNetworkImageProvider or directly use CachedNetworkImage

[MahdiPishguy]

when i try to use this library on Container to make circle image i get error

The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'.

code:

image: DecorationImage(
  image: CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    placeholder: (context, url) => new CircularProgressIndicator(),
    errorWidget: (context, url, error) => Image.asset("assets/images/profile.jpg"),
  ),
),

now i try to use another way for example:

image: new DecorationImage(image:new CachedNetworkImageProvider(url)),

so how can i have placeholder and errorWidget in this implementation?

[colt005]

Did u find a solution to this?

[MahdiPishguy]

@colt005 no, i can't

[colt005]

Use CachedNetworkImageProvider instead of CachedNetworkImage, It would solve the problem.

[MahdiPishguy]

@colt005

in my issue as i said

now i try to use another way for example:
image: new DecorationImage(image:new CachedNetworkImageProvider(url)),
so how can i have placeholder and errorWidget in this implementation?

[colt005]

I used an if condition to check if the url is empty, it simply solved the issue in my use-case.

[renefloor]

@MahdiPishguy sorry for my late reaction.

ImageProviders can only return 1 image, so this cannot return a placeholder first.
All image widgets on Android expect an imageprovider, so indeed you cannot use CachedNetworkImage directly. CachedNetworkImage does provide a callback which gives an imageprovider. What you can do is something like this (I'll improve the readme file to show this option):

CachedNetworkImage(
  imageUrl: "http://notAvalid.uri",
  imageBuilder: (context, imageProvider) => Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: imageProvider,
            fit: BoxFit.cover,
          ),
        ),
      ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

[MahdiPishguy]

@renefloor

thanks to reply, please let me to check that

[renefloor]

I've also added it to the readme now.

[renefloor]

If you want to use it with DecorationImage you need to use CachedNetworkImageProvider. If you want to combine it with a placeholder you can do like this:

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),