Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

                    ),

                  ),

like image 523
ARUN BALAJI Avatar asked Oct 29 '25 17:10

ARUN BALAJI


1 Answers

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

like image 93
Maxim Saplin Avatar answered Oct 31 '25 07:10

Maxim Saplin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!