加载颤动时去除图像中的白色闪烁

Question

我正在构建一个在网格视图中显示数百张图像的应用程序。在网格图块中，我展示了低质量的图像。当我们按下图像时，我会显示完整质量的图像，同时，我会显示低质量图像作为占位符。我正在使用 CachedNetworkImage 包。这里的问题是当加载全质量图像时会出现一些白色闪烁，如 here 所示。我想删除那个 flickr。有什么方法可以删除那个吗？

这是我的代码。

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

                    ),

                  ),

Answer 1

CachedNetworkImage 中有 2 个淡入淡出持续时间，默认值为非空值（顺便说一下，placeholderFadeInDuration 为空值），您可以尝试将 fadeOutDuration 和 [=12] 归零=]:

加载颤动时去除图像中的白色闪烁

Remove White Flicker in Image when loading flutter

android

dart

flutter

flutter-layout

flutter-gridview