flutter如何使用blurhash实现图片模糊效果

在Flutter项目中，我想用Blurhash来实现图片加载前的模糊预览效果，但不太清楚具体该如何实现。能否提供一个完整的示例代码，包括如何将Blurhash字符串解码为图像，以及如何与CachedNetworkImage等网络图片组件配合使用？最好能说明下是否需要额外安装依赖库，以及如何处理不同尺寸的模糊效果适配问题。

2 回复

在Flutter中使用blurhash，需先添加blurhash依赖。然后通过BlurHash组件加载模糊图片，传入hash字符串和尺寸参数即可快速显示模糊效果，提升用户体验。

更多关于flutter如何使用blurhash实现图片模糊效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 BlurHash 实现图片模糊效果，可以通过 blurhash 包来实现。以下是具体步骤：

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  blurhash: ^2.0.0

2. 基本用法

使用 BlurHash 组件显示模糊图像：

import 'package:blurhash/blurhash.dart';

BlurHash(
  hash: 'L5H2EC=PM+yV0g-mq.wG9c010J}I', // 替换为你的 BlurHash 字符串
  imageFit: BoxFit.cover,
  duration: Duration(milliseconds: 500), // 可选：加载完成后的渐变动画时长
),

3. 结合网络图片使用

通常用于在加载网络图片时显示模糊占位图：

Stack(
  children: [
    BlurHash(
      hash: 'L5H2EC=PM+yV0g-mq.wG9c010J}I',
      imageFit: BoxFit.cover,
    ),
    Image.network(
      'https://example.com/your-image.jpg',
      fit: BoxFit.cover,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return Container(); // 图片加载完成后显示
      },
    ),
  ],
)

4. 生成 BlurHash 字符串

  • 使用在线工具（如 blurha.sh）或后端库生成 BlurHash 字符串
  • 需要原始图片数据生成对应的哈希值

5. 自定义参数

  • hash：必需的 BlurHash 字符串
  • color：自定义颜色（可选）
  • imageFit：图片填充方式
  • duration：动画时长
  • decodingWidth/decodingHeight：解码分辨率（默认 32x32）

注意事项

  • 确保 BlurHash 字符串有效
  • 可配合 CachedNetworkImage 等图片库使用
  • 适用于改善用户体验，避免图片加载时的空白区域

这种方法能有效提升图片加载体验，在图片完全加载前显示模糊预览效果。

回到顶部