blurhash_shader

This package is a Flutter implementation of BlurHash, an algorithm for encoding images into a compact string representation. It is designed to create a visually appealing low-resolution placeholder for images while they are loading, leveraging the power of shaders to speed up rendering.

Features

Shader Acceleration: By using fragment shaders, it leverages GPU acceleration for fast image rendering, reducing CPU usage.
No Flickering: The component displays immediately without flickering or delays. (Requires shader preloading)

Getting Started

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  blurhash_shader: any # or the latest version on Pub

Usage

To use the BlurHash widget in your application, follow these steps:

Import the package:

import 'package:blurhash_shader/blurhash_shader.dart';

Use the BlurHash widget in your Flutter tree:

BlurHash('LEHLk~WB2yk8pyo0adR*.7kCMdnj')

Preload Shaders (Must)

To preload shaders and avoid flickering during their initial use, call the following method at the start of your application:

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

Use as Decoration

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

AnimatedContainer(
  width: 300,
  height: 300,
  duration: Duration(seconds: 1),
  decoration: BlurHashDecoration(
    // change hash value to see the transition effect
    hash: 'LEHLk~WB2yk8pyo0adR*.7kCMdnj',
  ),
);

Example

Here is a simple example of how to implement the BlurHash widget:

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

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

class MyApp extends StatelessWidget {
  @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'),
          ),
        ),
      ),
    );
  }
}

Contributing

Contributions are welcome! If you have suggestions or improvements, please fork the repository and submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgments

BlurHash for the original algorithm.
flutter_blurhash for the initial implementation.
Flutter community for their continuous support and contributions.

BlurHash_Shader