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

fast_blurhash 是一个利用 Rust 解码 BlurHash 并使用 Dart FFI 调用这些函数的 Dart 包。相比常见的 Dart 实现，它平均快 20 倍以上，并且可以在发布模式下通过运行 benchmarks.dart 演示来测试其性能。

状态

• 使用实验性 API，未来可能会有所更改。
• 第一次调用需要更长时间，因此添加了一个设置函数进行预热调用。
• 仅在 iOS 和 MacOS 上的发布模式中进行了测试。
• 发布模式和调试模式之间的性能差异显著，请勿依赖调试模式的结果。

项目结构

• rust: 包含 Rust 源代码。
• lib: 包含定义插件 API 的 Dart 代码，并使用 dart:ffi 调用本地代码。

性能基准测试

为了在发布模式下测试包的性能，可以运行 benchmarks.dart 演示：

flutter run -t lib/benchmarks.dart --release

iPhone 15 Pro 示例截图

M1 MacBook Pro 示例截图

示例 Demo

以下是完整的示例代码，展示了如何使用 fast_blurhash 插件：

import 'dart:typed_data';
import 'package:fast_blurhash/fast_blurhash.dart';
import 'package:flutter/material.dart';

void main() {
  setup(); // 初始化预热调用
  runApp(const BlurHashDemo());
}

class BlurHashDemo extends StatefulWidget {
  const BlurHashDemo({super.key});

  [@override](/user/override)
  State<BlurHashDemo> createState() => _BlurHashDemoState();
}

class _BlurHashDemoState extends State<BlurHashDemo> {
  final images = [
    "https://i.imgur.com/fU8vqCi.jpeg",
    "https://i.imgur.com/2CXbtO9.jpeg",
    "https://i.imgur.com/54sDohv.jpeg",
  ];

  final hashes = [
    "THEC,t~qWGb=IUxI%ejEIBR~xuaf",
    "TKLpT@?w=V_3RkH=10IU,nT1NGn4",
    "TgDSt8kDWV~qt7WV_3s:ay?bofj@",
  ];

  bool useAsync = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('BlurHash Demo'),
          actions: [
            Switch(
              value: useAsync,
              onChanged: (value) {
                setState(() {
                  useAsync = value;
                });
              },
            ),
            Padding(
              padding: const EdgeInsets.only(right: 16.0),
              child: Center(
                child: Text(useAsync ? 'Async' : 'Sync'),
              ),
            ),
          ],
        ),
        body: PageView.builder(
          scrollDirection: Axis.vertical,
          itemCount: images.length,
          itemBuilder: (BuildContext context, int index) {
            if (useAsync) {
              return FastBlurhashWidgetBuilder(blurhashString: hashes[index]);
            }
            return SizedBox.expand(
              child: FadeInImage.memoryNetwork(
                fit: BoxFit.cover,
                placeholder: decodeBlurhash(blurhashString: hashes[index]),
                fadeInDuration: const Duration(seconds: 2),
                fadeOutDuration: const Duration(seconds: 2),
                image: images[index],
              ),
            );
          },
        ),
      ),
    );
  }
}

class FastBlurhashWidgetBuilder extends StatefulWidget {
  const FastBlurhashWidgetBuilder({
    super.key,
    required this.blurhashString,
    this.height = 32,
    this.width = 32,
    this.punch = 1.0,
    this.enableCache = true,
    this.child,
  });

  final String blurhashString;
  final int height;
  final int width;
  final double punch;
  final bool enableCache;
  final Widget? child;

  [@override](/user/override)
  State<FastBlurhashWidgetBuilder> createState() =>
      _FastBlurhashWidgetBuilderState();
}

class _FastBlurhashWidgetBuilderState extends State<FastBlurhashWidgetBuilder> {
  late Future<Uint8List> _blurhashFuture;

  [@override](/user/override)
  void initState() {
    super.initState();
    _blurhashFuture = decodeBlurhashIsolate(
      blurhashString: widget.blurhashString,
      height: widget.height,
      width: widget.width,
      punch: widget.punch,
      enableCache: widget.enableCache,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder<Uint8List>(
      future: _blurhashFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            snapshot.hasData) {
          return Stack(
            children: [
              Image.memory(
                snapshot.data!,
                fit: BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              ),
              if (widget.child != null) widget.child!,
            ],
          );
        } else {
          return widget.child ?? Container(color: Colors.transparent);
        }
      },
    );
  }
}