Get to know when CacheNetworkImage successfully show network image-CodePudding

I am using CacheNetworkImage for displaying an image, I have a use case like I have to show loading on the whole Container until the image is not rendered. Is there any way I can get to know that my image is successfully rendered on screen?

This is what I have done so far:

 return CachedNetworkImage(
      fit: BoxFit.fill,
      imageUrl: url,
      errorWidget: (a, b, c) => const Center(child: Icon(Icons.error_outline)),
      progressIndicatorBuilder: (context, _, DownloadProgress progress) {
        getProgressStatus(progress);
        return Shimmer(color: Colors.grey, child: const SizedBox.expand());
      },
    );

void getProgressStatus(DownloadProgress loadingStatus) {
    if (loadingStatus.downloaded == loadingStatus.totalSize) {
      scheduleMicrotask(() {
        setState(() {
          isLoaded = true;
        });
      });
      return;
    }

    scheduleMicrotask(() {
      setState(() {
       isLoaded = false;
      });
    });
  }

CodePudding user response：

By using progressIndicatorBuilder property of CachedNetworkImage you can manage it,

 progressIndicatorBuilder: (context, url, downloadProgress) =>
       Container(
           margin: EdgeInsets.only(
               top: 100.h,
               bottom: 100.h
           ),
           child: CircularProgressIndicator(
               value: downloadProgress.progress,
               color: AppColors.lightBlack)),
           )

CodePudding user response：

You can use placeholder until the image is loaded. This is how you can use it.

CachedNetworkImage(
                  placeholder: placeholderWidgetFn() as Widget Function(
                      BuildContext, String)?,
                  imageUrl: imgURL,
                  width: 300,
                  height: (MediaQuery.of(context).size.height) / 2.5,
                ),

Widget? Function(BuildContext, String) placeholderWidgetFn() =>
    (_, s) => placeholderWidget();

Widget placeholderWidget() =>
    Image.asset('images/placeholder.jpg', fit: BoxFit.cover);