How to use placeholder in CachedNetworkImage?-CodePudding

I want to add a placeholder of a progress bar while image is loading but for some reason it does not work.

My code

CachedNetworkImage(
  imageUrl: 'url',
  fit: BoxFit.cover,
  height: 100,
  width: 100,
  placeholder: CircularProgressIndicator(),
),

CodePudding user response：

You can use progressIndicatorBuilder when image is loading like this

progressIndicatorBuilder:
                          (context, url, downloadProgress) => Container(
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.white,
                        ),
                      ),

or try this for placeholder

placeholder: (context, url) => new CircularProgressIndicator(),

CodePudding user response：

Placeholder property of CachedNetworkImage is function with args (BuildContext context, String url) and returns Widget.

Try this approach :

CachedNetworkImage(
    height: 100,
    width: 100,
    imageUrl: 'imageUrl',
      fit: BoxFit.cover,

    placeholder: (context, url) => Container(
      color:  Colors.transparent,
      height: 100,
      width: 100,
      child: SpinKitFadingCircle(
        color: ColorConstants.colorPrimary,
        size: 30,
      ),
    ),

    errorWidget: (context, url, error) => Image.asset(
       placeHolderImage,
      width: 100,
      height: 100,
      fit: BoxFit.cover,
    ),
  )