Flutter BlurHash Image Placeholder Example
In this article, we are going to integrate blurhash image placeholder in flutter application when image is fetched from network resources to display animation for some duration. You can also check out flutter animations related articles.
Image placeholder is used in mobile apps when image is fetched from network. If image fetching process takes some time then we can display placeholder on image area. Using flutter_blurhash package, we can display image placeholder like real image. In this flutter example, you will see how we will use BlurHash as placeholder for image.
To use blurhash in flutter application, first we need to generate hash string from picture using BlurHash algorithm. We can generate hash string from image at blurha.sh. BlurHash widget has many properties to customize placeholder in flutter app. hash property is required. Here we can add our generated hash string for specific image.
Using image property, we can download image from network resources. imageFit attribute is used to fit downloaded images in flutter app. We can also display background color using color parameter. duration attribute is used to display placeholder animation for certain amount of duration.
curve property is used for animation curve in flutter app. onDecoded callback is used to detect when hash is decoded. onStarted property is used to detect when download starts. onReady attribute is used to detect when image is downloaded. We can also set width and height of decoding hash using decodingWidth and decodingHeight parameters.
Add required package in pubspec.yaml file
Flutter Image Placeholder
import ‘package:flutter_blurhash/flutter_blurhash.dart’;
class MyBlurHashImageScreen extends StatefulWidget {
@override
_MyBlurHashImageScreenState createState() => _MyBlurHashImageScreenState();
}
class _MyBlurHashImageScreenState extends State<MyBlurHashImageScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter BlurHash Image Sample’)),
body: Center(
child: BlurHash(
curve: Curves.bounceInOut,
imageFit: BoxFit.fitWidth,
duration: const Duration(seconds: 5),
hash: ‘LHA-Vc_4s9ad4oMwt8t7RhXTNGRj’,
image: ‘https://images.unsplash.com/photo-1486072889922-9aea1fc0a34d?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bW91dGFpbnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60’,
),
),
);
}
}
