Im using

here is my CachedNetworkImage code

CachedNetworkImage(
            imageUrl: movie.poster.toString(),
            imageBuilder: (context, _) {
              return Image.network(
                movie.poster.toString(),
                height: 250,
                width: 164,
                fit: BoxFit.fill,
                alignment: Alignment.topCenter,
              );
            },
            placeholder: (context, url) => Container(
              height: 250,
              width: 164,
              child: Center(
                child: CircularProgressIndicator(
                  color: Colors.blue,
                ),
              ),
            ),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),

CodePudding user response：

This is happening because you are returning an Image.network which will again load the image, so you are getting this delayed image.

Replace Your Cached network image with this .

CachedNetworkImage(
    imageUrl: movie.poster.toString(),
    imageBuilder: (context, imageProvioder) {
      return Container(
        decoration: BoxDecoration(
          image: DecorationImage(image: imageProvioder, fit: BoxFit.fill),
        ),
      );
    },
    placeholder: (context, url) => Container(
      height: 250,
      width: 164,
      child: Center(
        child: CircularProgressIndicator(
          color: Colors.blue,
        ),
      ),
    ),
    errorWidget: (context, url, error) => Icon(Icons.error),
  ),

I Hope this helps.