4

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

                    ),

                  ),

ARUN BALAJI
  • 127
  • 1
  • 15

2 Answers2

2

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

Maxim Saplin
  • 4,115
  • 38
  • 29
  • I tried your solution. Still, it is not solved. Nothing changed – ARUN BALAJI Nov 17 '21 at 06:59
  • The other suspect is the transition animation. Not sure how you implemented switching of screens, yet you might want to check route animations (https://docs.flutter.dev/cookbook/animation/page-route-animation) or any other custom code which navigates to a certain wallpaper after clicking on a card. – Maxim Saplin Nov 17 '21 at 08:32
  • 1
    Thank you so much. I figured out and solved by adjusting duration as you said. – ARUN BALAJI Nov 17 '21 at 16:23
0

You might want setting PaintingBinding.instance.imageCache.maximumSizeBytes = 1000 << 20; in main(), as suggested here

Andrey Gordeev
  • 30,606
  • 13
  • 135
  • 162