我正在构建一款应用程序,它以网格视图显示数百张图片。在网格瓷砖中,我显示低质量的图像。当我们点击该图像时,我会显示完整质量的图像,并同时将低质量的图像作为占位符显示。我正在使用
以下是我的代码:
CachedNetworkImage
包。问题是当完整质量的图像加载时,会出现一些白色闪烁,如此处所示。我想要去除这个闪烁。有没有办法解决这个问题?以下是我的代码:
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)),
),
),