flutter_blurhash

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Flutter BlurHash is a lightweight package that enables compact, real-time placeholder generation for images using blurhash encoding. It encodes a blurred version of an image into a short string (under 30 characters), allowing instant display during loading—ideal for improving perceived performance in image-heavy apps. The encoded hash can be rendered directly as a placeholder, mimicking the original image's colors and structure before the actual image loads. This approach is widely used by platforms like Medium to enhance user experience.

Use cases

Image loading placeholders
Performance optimization in media-heavy apps
Instant visual feedback during image fetch
Progressive image rendering
Reducing perceived load time
Offline image previews

Key features

Ultra-compact hash representation
Real-time placeholder generation
Color-preserving blur effect
Cross-platform support
Easy integration with Image widgets
Low bandwidth usage

Suitable for

Apps with many images
Content feeds
Social media platforms
E-commerce apps
UIs prioritizing smooth loading
Developers seeking fast image placeholders

Considerations

Limited detail in very short hashes
Not suitable for high-fidelity previews
Requires decoding on client side
Best for low-resolution placeholders
May not match complex textures accurately
Hash must be precomputed or generated server-side

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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,
            ),
          ),
        ),
      ),
    ),
  );
}