Cached Network Image does not show progress indicator when image is loading

Question

I am displaying an image using cachednetworkimage and when I click to view an image, it first shows the placeholder image and then loads the image. I don't understand why it does not show progress indicator when the image loads. I want to show progress indicator when the image loads. Incase the image is not available, then the placeholder image should be shown. What am I doing wrong here?

Container(
              height: size.height * 0.35,
              width: double.infinity,
              child:_imageUrl != null
            ? CachedNetworkImage(
                imageUrl: _imageUrl,
                progressIndicatorBuilder: (context, url, downloadProgress) => 
                Center(child:Loading()),
                errorWidget: (context, url, error) => Icon(Icons.error),
              )
            :Image.asset('assets/images/placeholder.png'),
      ),

Solution

In progressIndicatorBuilder of cached network image, there's a parameter called downloadProgress, pass that value to CircularProgressIndicator to display loading.

Note: Replace NetowrkUrl with actual url

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

Comments

[mcfred]

If I replace the progress indicator with placeholder image, then if the imageUrl is null, then the progress indicator keeps on rendering.

[Felipe Vergara]

Are you listening for the value of image ?, it must change its state to enter the cacheImageNetwork.