Get to know when CacheNetworkImage successfully show network image - flutter

Question

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;
});
});
}

Answer 1

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

Answer 2

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

Answer 3

Usecase: I have a tile in which i have added CacheNetworkImage & I want to add the PlaceHolder on the whole tile until that specific image not loads.
See this image for what I want to achieve
I have achieve this using Stack widget.
Stack(
children: [
MyTile(
image: CacheNetworkImage(imageUrl)
),
SizedBox(
width: double.infinity,
height: ///Same as your lower container
child CacheNetworkImage(
imageUrl: imageUrl,
fit: BoxFit.fill,
color: Colors.transparent,
colorBlendMode: BlendMode.clear,
placeholder: (context, _) {
return MyPlaceHolder(...)
},
)
],
),
Note: Image url for both the child's will be exactly same