android - 加载颤振时消除图像中的白色闪烁

Question

我正在构建一个在网格视图中显示数百张图像的应用程序。在网格图块中，我展示了低质量的图像。当我们按下图像时，我显示了完整质量的图像，同时，我将低质量的图像显示为占位符。我正在使用该CachedNetworkImage软件包。这里的问题是，当加载完整质量的图像时，会出现一些白色闪烁，如图所示。我想删除那个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 个淡入淡出持续时间，默认值为非 null（placeholderFadeInDuration顺便说一下为 null），您可以尝试将fadeOutDuration和归零fadeInDuration：