Ad
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)),
),
),
Ad
Answer
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
:
Ad
source: stackoverflow.com
Related Questions
- → should I choose reactjs+f7 or f7+vue.js?
- → Phonegap Android write to sd card
- → Local reference jquery script in nanohttpd (Android)
- → Click to navigate on mobile devices
- → How to allow api access to android or ios app only(laravel)?
- → Access the Camera and CameraRoll on Android using React Native?
- → React native change listening port
- → What is the default unit of style in React Native?
- → Google play market autocomplete icon
- → Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
- → Using Laravel with Genymotion
- → react native using like web-based ajax function
- → react native pdf View
Ad