flutter_blurhash

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

Flutter BlurHash 是一個輕量級套件，可使用 BlurHash 編碼即時產生圖像的緊湊佔位符。它將圖像的模糊版本編碼為一段短字串（少於 30 個字元），可在載入時立即顯示——非常適合提升圖像密集型應用的感知效能。編碼後的哈希值可直接渲染為佔位符，模擬實際圖像載入前的顏色與結構。此方法被 Medium 等平台廣泛採用，以提升使用者體驗。

適用情境

圖像加載佔位符
媒體密集型應用中的性能優化
在圖像獲取過程中即時視覺反饋
漸進式圖像渲染
減少感知載入時間
離線圖像預覽

主要特色

超緊湊哈希表示
即時佔位符產生
保留色彩的模糊效果
跨平台支援
與圖像小部件的輕鬆整合
低頻寬使用

適合對象

包含大量圖片的應用
內容推送
社交媒體平台
電子商務應用
優先考慮流暢加載的UI
尋求快速圖像佔位符的開發者

使用建議

非常短的哈希值中細節有限
不適合用於高保真預覽
需要在客戶端進行解碼
最適合低解析度的佔位符
可能無法準確匹配複雜紋理
雜湊必須預先計算或在伺服器端產生

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Blurhash is compact representation of a blurred image. It's often used as a placeholder while waiting for a full image to load.

This package implements the blurhash-decoding algorithm in pure Dart. It also provides the BlurHash widget that displays the blurhash and can transition into the actual image once it is loaded.

Currently, it doesn't support encoding an image into a blurhash.

Generation

A fast and easy way to get a blurhash for your image is to upload it to https://blurha.sh.

Example

Constrain your widget's render area and let BlurHash fill the pixels.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("BlurHash")),
        body: const SizedBox.expand(
          child: Center(
            child: AspectRatio(
              aspectRatio: 1.6,
              child: BlurHash(hash: "L5H2EC=PM+yV0g-mq.wG9c010J}I"),
            ),
          ),
        ),
      ),
    );
  }
}

Optimization Modes

None (BlurHashOptimizationMode.none): The original algorithm, provided for backward compatibility.
Standard (BlurHashOptimizationMode.standard): Optimized decoding with better cache locality and performance.
Approximation (BlurHashOptimizationMode.approximation): Fastest mode with an approximated sRGB conversion that produces slightly darker results but significantly improves performance.

class BlurHashApp extends StatelessWidget {
  const BlurHashApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("BlurHash")),
      body: const SizedBox.expand(
        child: Center(
          child: AspectRatio(
            aspectRatio: 1.6,
            child: BlurHash(
              hash: "L5H2EC=PM+yV0g-mq.wG9c010J}I",
              optimizationMode: BlurHashOptimizationMode.approximation,
            ),
          ),
        ),
      ),
    ),
  );
}