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.
- 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)
Add the following dependency to your pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
blurhash_shader: any # or the latest version on PubTo use the BlurHash widget in your application, follow these steps:
- Import the package:
import 'package:blurhash_shader/blurhash_shader.dart';- Use the
BlurHashwidget in your Flutter tree:
BlurHash('LEHLk~WB2yk8pyo0adR*.7kCMdnj')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());
}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',
),
);
84D6
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'),
),
),
),
);
}
}Contributions are welcome! If you have suggestions or improvements, please fork the repository and submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for more details.
- BlurHash for the original algorithm.
- flutter_blurhash for the initial implementation.
- Flutter community for their continuous support and contributions.