Flutter图像模糊预览插件blurhash_shader的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter图像模糊预览插件 blurhash_shader 的使用

blurhash_shader 是一个用于Flutter的插件，它实现了BlurHash算法。该算法可以将图像编码为紧凑的字符串表示，从而在图像加载时提供低分辨率的占位符，提升用户体验。通过使用片段着色器（fragment shaders），它可以加速渲染过程并减少CPU的使用。

主要特性

  • 着色器加速：利用GPU加速图像渲染，降低CPU负载。
  • 无闪烁显示：组件能立即显示而不会出现闪烁或延迟（需要预先加载着色器）。

开始使用

安装

首先，在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  blurhash_shader: any # 或者指定最新版本号

使用方法

  1. 导入包：
import 'package:blurhash_shader/blurhash_shader.dart';
  1. 在Flutter小部件树中使用BlurHash小部件：
BlurHash('LEHLk~WB2yk8pyo0adR*.7kCMdnj')

预加载着色器（必须）

为了避免初次使用时出现闪烁，请在应用程序启动时调用以下方法来预加载着色器：

void main() async {
  await BlurHash.loadShader();
  runApp(MyApp());
}

作为装饰使用的例子

Container(
  width: 300,
  height: 300,
  decoration: BlurHashDecoration(
    hash: 'LEHLk~WB2yk8pyo0adR*.7kCMdnj',
  ),
);

AnimatedContainer(
  width: 300,
  height: 300,
  duration: Duration(seconds: 1),
  decoration: BlurHashDecoration(
    // 更改哈希值以查看过渡效果
    hash: 'LEHLk~WB2yk8pyo0adR*.7kCMdnj',
  ),
);

示例代码

这是一个简单的示例，展示了如何实现BlurHash小部件：

import 'package:flutter/material.dart';
import 'package:blurhash_shader/blurhash_shader.dart';

void main() async {
  // 预加载着色器
  await BlurHash.loadShader();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BlurHash Example')),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: BlurHash('LEHLk~WB2yk8pyo0adR*.7kCMdnj'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图像模糊预览插件blurhash_shader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图像模糊预览插件blurhash_shader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用blurhash_shader插件来实现图像模糊预览的示例代码。blurhash_shader插件允许你使用Blurhash字符串来渲染一个占位符图像，这在加载实际图像时非常有用，因为它提供了一个视觉上的过渡效果。

首先，确保你的pubspec.yaml文件中已经添加了blurhash_shader依赖：

dependencies:
  flutter:
    sdk: flutter
  blurhash_shader: ^0.3.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个简单的Flutter应用示例，展示如何使用blurhash_shader：

import 'package:flutter/material.dart';
import 'package:blurhash_shader/blurhash_shader.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('BlurHash Shader Example'),
        ),
        body: Center(
          child: BlurHashImageDemo(),
        ),
      ),
    );
  }
}

class BlurHashImageDemo extends StatefulWidget {
  @override
  _BlurHashImageDemoState createState() => _BlurHashImageDemoState();
}

class _BlurHashImageDemoState extends State<BlurHashImageDemo> {
  final String blurHash = "LEHB77xk+ZsmU2x69y7ysx69y7z0xV2";  // 示例BlurHash字符串
  final String imageUrl =
      "https://example.com/path/to/your/image.jpg";  // 替换为你的实际图片URL
  late ImageProvider imageProvider;

  @override
  void initState() {
    super.initState();
    // 使用NetworkImageProvider加载网络图片，并缓存结果
    imageProvider = CachedNetworkImageProvider(imageUrl);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        // 使用BlurHashShader显示模糊预览
        BlurHash(
          hash: blurHash,
          image: imageProvider,
          width: double.infinity,
          height: double.infinity,
          fit: BoxFit.cover,
        ),
        // 加载实际图片，一旦图片加载完成，BlurHash预览会被替换
        FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,  // 占位符图片（虽然BlurHash已经提供了占位符效果，但这里仍然需要提供一个占位符给FadeInImage）
          image: imageUrl,
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ],
    );
  }
}

// kTransparentImage是一个透明的1x1像素图片，用作FadeInImage的占位符
final kTransparentImage = Uint8List.fromList(<int>[
  0x89,
  0x50,
  0x4E,
  0x47,
  0x0D,
  0x0A,
  0x1A,
  0x0A,
  0x00,
  0x00,
  0x00,
  0x0D,
  0x49,
  0x48,
  0x44,
  0x52,
  0x00,
  0x00,
  0x00,
  0x01,
  0x00,
  0x00,
  0x00,
  0x01,
  0x08,
  0x06,
  0x00,
  0x00,
  0x00,
  0x1F,
  0xF3,
  0xFF,
  0x61,
  0x00,
  0x00,
  0x00,
  0x0A,
  0x49,
  0x44,
  0x41,
  0x54,
  0x78,
  0x9C,
  0x63,
  0x00,
  0x01,
  0x00,
  0x00,
  0x00,
  0x01,
  0x00,
  0x00,
  0x00,
  0x00,
  0x80,
  0x82,
  0x01,
  0x57,
  0x1C,
  0x00,
  0x00,
  0x00,
  0x00,
  0x49,
  0x45,
  0x4E,
  0x44,
  0xAE,
  0x42,
  0x60,
  0x82,
]);

在这个示例中：

  1. 我们使用了BlurHash小部件来显示BlurHash字符串生成的模糊预览。
  2. FadeInImage.memoryNetwork用于加载实际的图片，当图片加载完成时，它会逐渐显示出来，覆盖掉BlurHash预览。
  3. kTransparentImage是一个透明的1x1像素图片，用作FadeInImage的占位符（虽然BlurHash已经提供了占位符效果，但FadeInImage仍然需要一个占位符参数）。

请注意，CachedNetworkImageProvider是cached_network_image包的一部分，你可能需要在pubspec.yaml中添加这个依赖来缓存网络图片。这个依赖不是必需的，但可以提高图片加载性能。

dependencies:
  cached_network_image: ^3.1.0  # 请检查最新版本号

希望这个示例代码能帮助你理解如何在Flutter中使用blurhash_shader插件！

回到顶部