Search code examples
androidflutterdartflutter-layoutflutter-gridview

Remove White Flicker in Image when loading flutter

I'm building an app which shows hundreds of images in grid view. In grid tile, I showed low-quality images. when we press the image I showed the full quality image, In the meantime, I'm showing the low-quality image as a placeholder. I'm using the CachedNetworkImage package. Problem here is when the full quality image loads there is some white flicker as shown as here. I want to remove that flickr. Is there any way to remove that one ?

Here is my code.

 Widget cachedImage(imageUrl) {
    return CachedNetworkImage(
      imageUrl: imageUrl,
      imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              color: Theme.of(context).shadowColor,
                borderRadius: BorderRadius.circular(10),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      color: Theme.of(context).shadowColor,
                      blurRadius: 2,
                      offset: Offset(2, 2))
                ],
                image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover)),
          ),
      placeholder: (context, url) => LoadingWidget1(),
      errorWidget: (context, url, error) => Center(child: Icon(Icons.error)),
    );
  }

//code for thumbnail image
Hero(
    tag: 'category$index',
    child: cachedImage(d['thumbnail url'])
),

//Code for FullQuality Preview

....
child: CachedNetworkImage(
                placeholderFadeInDuration: Duration(microseconds: 0),
                useOldImageOnUrlChange: true,
                imageUrl: imageUrl,
                imageBuilder: (context, imageProvider) => Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: imageProvider, fit: BoxFit.cover)),
                ),

                placeholder: (context, url) => Stack(
                  children: [

                    CachedNetworkImage(
                      imageUrl: thumbUrl,
                      imageBuilder: (context, imageProvider) => Container(
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: imageProvider, fit: BoxFit.cover)),

                    ),

                  ),
Solution

  • There're 2 fade durations in CachedNetworkImage with default values being non null (placeholderFadeInDuration is null by the way), you can try zeroing both fadeOutDuration and fadeInDuration:

    enter image description here