当加载Flutter时，如何消除图像中的白色闪烁？

Question

我正在构建一款应用程序，它以网格视图显示数百张图片。在网格瓷砖中，我显示低质量的图像。当我们点击该图像时，我会显示完整质量的图像，并同时将低质量的图像作为占位符显示。我正在使用 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)),

                    ),

                  ),

- ARUN BALAJI

---

显示闪烁的链接返回了404错误。 - Curt Eckhart

我更新了链接。 - ARUN BALAJI

尝试将淡入持续时间增加到一秒钟左右，看看问题是否变得更加明显。可能是一毫秒的淡入效果看起来很奇怪。 - Curt Eckhart

我已经尝试过了。它没有做出任何改变。即使我不想隐藏它，我能否在图像上方显示一秒钟的圆形进度指示器？ - ARUN BALAJI

Answer 1

在CachedNetworkImage中有两个淡出持续时间，其默认值为非空（顺便提一下，placeholderFadeInDuration为空）。你可以尝试将fadeOutDuration和fadeInDuration都设置为零：

- Maxim Saplin

---

我尝试了你的解决方案。但是，问题仍未解决。没有任何改变。 - ARUN BALAJI

另一个嫌疑人是过渡动画。不确定您如何实现屏幕切换，但您可能需要检查路由动画（https://docs.flutter.dev/cookbook/animation/page-route-animation）或任何其他自定义代码，该代码在单击卡后导航到某个壁纸。 - Maxim Saplin

非常感谢。我按照您的建议调整了持续时间，问题已经解决了。 - ARUN BALAJI

Answer 2

你可能想在main()中设置PaintingBinding.instance.imageCache.maximumSizeBytes = 1000 << 20;，如这里所建议的。

- Andrey Gordeev