'How to use placeholder in CachedNetworkImage?

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


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tushar Asodariya