我试图将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数据没有改变,所以我不知道为什么会发生和/或如何解决它。
有谁知道吗?
1条答案
按热度按时间rur96b6h1#
此问题与
CachedNetworkImage
包有关。当我单独使用blurhash
包时,它不会 Flink 。您可以使用OctoImage
。它也支持blurhash。如果你保持fadeInDuration更小,你将有平滑的过渡。
例如,在
字符串