Flutter BlurhHash通过CachedNetworkImage加载时 Flink

r1wp621o  于 2023-08-07  发布在  Flutter
关注(0)|答案(1)|浏览(146)

我试图将BlurHash与CachedNetworkImage进行组合,以便在从Cloud Firestore加载图像时提供一个很好的过渡。
问题是,大多数时候,BlurHash会在转换到加载的图像之前 Flink 。
我把它缩小到了一个事实,即它 Flink 从模型对象加载的哈希值,从Firestore返回。如果我硬编码一个模糊散列, Flink 不会发生。

Widget get _networkImage {
    final Duration fadeDuration = Duration(milliseconds: hasBlurhHash ? 500 : 0);
    return CachedNetworkImage(
      imageUrl: imageURL!,
      fit: fit,
      width: width,
      height: height,
      fadeInDuration: fadeDuration,
      fadeOutDuration: fadeDuration,
      placeholder: (context, __) => hasBlurhHash ? _blurHash : _loader(context),
      errorWidget: (context, url, error) => Image(image: AssetImage("assets/img/aboutus.png")),
    );
  }

  Widget get _blurHash => BlurHash(hash: blurHash!, color: Colors.white);

  Widget _loader(BuildContext context) => ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 48.h, maxWidth: 48.h),
        child: Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
            strokeWidth: 4,
          ),
        ),
      );

字符串
问题是blurHash数据没有改变,所以我不知道为什么会发生和/或如何解决它。
有谁知道吗?

rur96b6h

rur96b6h1#

此问题与CachedNetworkImage包有关。当我单独使用blurhash包时,它不会 Flink 。您可以使用OctoImage。它也支持blurhash。
如果你保持fadeInDuration更小,你将有平滑的过渡。
例如,在

OctoImage(
    image: CachedNetworkImageProvider(imgUrl),
    placeholderBuilder: OctoPlaceholder.blurHash(
        imgHash,
    ),
    errorBuilder: OctoError.icon(color: Colors.grey),
    fit: BoxFit.cover,
    fadeOutDuration: Duration(milliseconds: 2000),
    fadeInDuration: Duration(milliseconds: 200))

字符串

相关问题