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

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

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

简介

Flutter BlurHash 是一个用于在加载高分辨率图片前，显示紧凑占位符的库。它能快速生成和解析简单的颜色组合来表示一张图片的主要特征，在网络条件不佳或需要提升用户体验时特别有用。

你可以通过 BlurHash 官网 来获取图片对应的 BlurHash 字符串，或者使用官方提供的 API 在服务端生成。

使用方法

添加依赖

首先，在 pubspec.yaml 文件中添加对 flutter_blurhash 的依赖：

dependencies:
  flutter_blurhash: ^最新版本号

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

示例代码

下面是一个简单的例子，展示了如何在一个应用程序中使用 flutter_blurhash 插件来创建一个带有模糊预览效果的应用界面。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter BlurHash Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 AspectRatio 控制宽高比
            AspectRatio(
              aspectRatio: 1.6, // 根据实际需求调整
              child: BlurHash(
                hash: "L5H2EC=PM+yV0g-mq.wG9c010J}I", // 替换为你的 BlurHash 字符串
                image: "https://example.com/image.jpg", // 实际图片链接
                duration: const Duration(seconds: 2), // 渐变时间
                onStarted: () => print("开始解码"),
                onDecoded: () => print("解码完成"),
                onDisplayed: () => print("图片显示"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的 Flutter 应用程序，并在其中添加了一个 BlurHash 小部件。当用户打开页面时，会先看到由 BlurHash 字符串生成的模糊预览图，随后逐渐过渡到真实的高清图片。

如果你想要更复杂的交互效果，可以参考官方示例代码中的 SynchronizedDisplay 类，它展示了如何结合动画和其他 UI 元素来增强视觉体验。

希望这些信息对你有所帮助！如果有任何问题，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_blurhash插件来实现图像模糊预览的示例代码。flutter_blurhash插件允许你使用Blurhash字符串来快速渲染一个占位符模糊图像，这在加载高分辨率图像之前特别有用，可以提供更好的用户体验。

首先，你需要在pubspec.yaml文件中添加flutter_blurhash依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_blurhash: ^3.0.0  # 请检查最新版本号

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

接下来，在你的Flutter应用中，你可以使用Blurhash小部件来显示模糊预览。以下是一个完整的示例代码，展示了如何使用Blurhash小部件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blurhash Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Blurhash Demo'),
        ),
        body: Center(
          child: BlurhashDemo(),
        ),
      ),
    );
  }
}

class BlurhashDemo extends StatefulWidget {
  @override
  _BlurhashDemoState createState() => _BlurhashDemoState();
}

class _BlurhashDemoState extends State<BlurhashDemo> {
  String blurHash = "LBFx#xz9E@9EPx-y0y00u9x";  // 示例Blurhash字符串
  String imageUrl = "https://example.com/path/to/your/image.jpg";  // 高清图片URL

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Blurhash(
          hash: blurHash,
          width: 300,
          height: 300,
          child: Image.network(
            imageUrl,
            fit: BoxFit.cover,
            loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) return child;
              return Opacity(
                opacity: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                    : 0,
                child: child,
              );
            },
          ),
        ),
        SizedBox(height: 20),
        Text(
          "Loading high-resolution image...",
          style: TextStyle(fontSize: 18),
        ),
      ],
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在pubspec.yaml中添加了flutter_blurhash依赖。
  2. 创建了一个简单的Flutter应用，包含一个BlurhashDemo小部件。
  3. 在BlurhashDemo中，我们定义了一个Blurhash字符串和一个高清图片的URL。
  4. 使用Blurhash小部件显示模糊预览。Blurhash小部件需要一个Blurhash字符串、宽度和高度，并且它包含一个子小部件，通常是你要加载的高清图片。
  5. 使用Image.network加载高清图片，并通过loadingBuilder属性在图片加载过程中显示一个逐渐变得不透明的模糊预览。

你可以通过替换blurHash和imageUrl变量中的值来使用你自己的Blurhash字符串和图片URL。Blurhash字符串通常由你的图像服务在生成图像时提供。

回到顶部