on loaded notification / callback needed

[BerndWessels]

I often need to know if the image is still loading or has successfully loaded yet.

Can you please add a callback or notification for the loading state.

[RyanYANG52]

I added two callback, and tested in my project. Hope that helps
#97

[Cotspheer]

Would love to see this merged! Exactly what I need, because images may not be available for a long time I want to hide the whole widget when it fails to load an image. This would make it possible.

[renefloor]

Now working with the builders

[RyanYANG52]

How is the builders going to notify when the image is loaded. Placeholder builder called when start loading, error widget builder called when image loaded failed.

[renefloor]

@RyanYANG52 If you set the imageBuilder with a simple Image yourself you also get a callback on loaded.

[RyanYANG52]

OK, thanks.

[kwent]

@renefloor We need a tutorial or a section in the README cause i doubt most of us know how you do it ...

[kwent]

Actually i figure it out. Posting code here for others.

final VoidCallback onLoaded;
...
CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) {
    if (onLoaded != null) {
      onLoaded();
    }
    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),
);

[guenth39]

This is way too complicated and too much unnecessary code in my opinion. Why do I have to write the complete imageBuilder myself just because I want to know when the image is loaded @renefloor ? What's wrong with adding a simple onLoadedCallback or at least calling the progressIndicatorBuilder again with progress = 1.0 in every case when the loading is done?
The answer from @kwent works but clean and clear code looks different to me.

[kamleshwebtech]

Actually i figure it out. Posting code here for others.

final VoidCallback onLoaded;
...
CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) {
    if (onLoaded != null) {
      onLoaded();
    }
    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),
);

@kwent What is onLoaded? Kindly add a note for the same. Thanks.

[kamleshwebtech]

Actually i figure it out. Posting code here for others.

final VoidCallback onLoaded;
...
CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) {
    if (onLoaded != null) {
      onLoaded();
    }
    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),
);

still getting "CacheManager: Failed to download file from...." error message in VS code console panel.

[kamleshwebtech]

Now working with the builders

Kindly share your implemented solution. I am still searching the solution. Thanks.

[fareesh]

You can write something like this - since the imageBuilder is invoked after the image is loaded, if I understand correctly

imageBuilder: (context, imageProvider) {
  /// Onload code goes here
  return Image(image: imageProvider);
}

[Edijae]

I agree. there should be fail and success methods just like in other image loading libraries like Glide.

[DavidOrakpo]

2024 and the solution given here is still not clear.