Exploring BlurHash Image Placeholder In Flutter
Stacking a picture from the network might require a couple of moments to finish, contingent upon the association speed. While the picture is being fetched, it’s entirely expected to show a placeholder. There are a few strategies for showing a placeholder. For instance, you can show a colored box. In any case, it would be more pleasant if the placeholder can be like the real picture. For that reason, you can utilize BlurHash.
In this blog, we will be Exploring BlurHash Image Placeholder In Flutter. We will see how to implement a demo program of the blur hash and how to use BlurHash as an image placeholder using the flutter_blurhash package in your flutter applications.
flutter_blurhash | Flutter Package
Compact representation of a placeholder for an image. You can use https://blurha.sh/ for testing or use any official…pub.dev
Table Of Contents::
Introduction:
BlurHash is a conservative portrayal of a placeholder for a picture. It works by producing a hash string from a picture. The produced hash string will be utilized to deliver the placeholder. This article tells the best way to disentangle the BlurHash string to be delivered as a picture placeholder in a Flutter application.
Demo Module :
This demo video shows how to use a blurhash in a flutter. It shows how the blurhash will work using the flutter_blurhash package in your flutter applications. It shows a compact representation of a placeholder for an image. It will be shown on your device.
Constructor:
There are constructor of BlurHash are:
const BlurHash({
required this.hash,
Key? key,
this.color = Colors.blueGrey,
this.imageFit = BoxFit.fill,
this.decodingWidth = _DEFAULT_SIZE,
this.decodingHeight = _DEFAULT_SIZE,
this.image,
this.onDecoded,
this.onReady,
this.onStarted,
this.duration = const Duration(milliseconds: 1000),
this.curve = Curves.easeOut,
})
The constructor expects you to pass a boundary hash which is the hash string figured utilizing the BlurHash algorithm. On the off chance that you don’t as of now have the hash string, you can utilize their authority site blurha. sh to create the hash string from the picture that you need to utilize.
Parameters:
There are some parameters of BlurHash are:
- > hash: This parameter is required. The hash to decode.
- > onDecoded: This parameter is used to callback when the hash is decoded.
- > image: This parameter is used to remote resources to download.
- > imageFit: This parameter is used how to fit decoded & downloaded images.
- > color: This parameter is used to displayed background color before decoding.
- > duration: This parameter is used for animation duration. Defaults to
const Duration(milliseconds: 1000). - > curve: This parameter is used to animation curve. Defaults to
Curves.easeOut. - > onStarted: This parameter is used to callback to be called when the download starts.
- > onReady: This parameter is used to callback when the image is downloaded.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
flutter_blurhash:
Step 2: Import
import 'package:flutter_blurhash/flutter_blurhash.dart';
Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
The following is a model which just passes the hash argument. Since the Image argument isn’t passed, it will show the placeholder until the end of time.
BlurHash(
hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
In the body, we will add BlurHash() method. In this method, we will add imagefit implies you can set how to fit the image to the accessible space by passing an BoxFit enum as the imageFit the argument to the constructor. If you don’t pass the argument, the worth defaults to BoxFit.fill. The use of imageFit contention is like the fit property of FittedBox. Presently, we will add duration implies after the picture has been effectively downloaded, the picture will be enlivened for a given term before totally shown. The duration can be set by passing Duration esteem as the duration contention. The default value if you don’t pass the argument is 1 second.
BlurHash(
imageFit: BoxFit.fitWidth,
duration: const Duration(seconds: 4),
curve: Curves.bounceInOut,
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',
),
Now, we will set the curve means the animation curve can be set by passing curve argument. The default value is Curves.easeOut. Finally, we will add image means where the image argument is passed with a remote URL of an image as the value. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Presently, we will set the curve implies the animation curve can be set by passing curve argument. The default esteem is Curves.easeOut. At long last, we will add an image implies where the image argument is passed with a distant URL of a picture as the value. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_blur_hash_demo/splash_screen.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class BlurHashDemo extends StatelessWidget {
@override
Widget build(BuildContext context) =>
Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
automaticallyImplyLeading: false,
title: Text("Flutter BlurHash Demo")
),
body: Center(
child: BlurHash(
imageFit: BoxFit.fitWidth,
duration: const Duration(seconds: 4),
curve: Curves.bounceInOut,
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',
),
),
);
}
Conclusion:
In the article, I have explained the basic structure of the BlurHash Image Placeholder in a flutter; you can modify this code according to your choice. This was a small introduction to BlurHash Image Placeholder On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the BlurHash Image Placeholder in your flutter projects. We will show you what the Introduction is?, the constructor, some parameters using in BlurHash, and make a demo program for working BlurHash. That’s how to decode a BlurHash-encoded value to be displayed as an image placeholder. It can be done easily using the flutter_blurhash package in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
