flutter uses BlurHash algorithm to implement image thumbnails

original

https://medium.com/flutterdevs/exploring-blurhash-image-placeholder-in-flutter-24dad611c487

Code

https://github.com/ducafecat/getx_quick_start

refer to

text

Depending on the speed of Lenovo, it may take several minutes to superimpose a picture from the network. When you get the picture, you can expect it to display a placeholder. There are some strategies for displaying placeholders. For example, you can display a colored box. In any case, if the placeholder can look like a real picture, it would be even more enjoyable. Therefore, you can use BlurHash.

In this blog, we will explore Flutter image placeholders. We will see how to implement the blur hash demo program, and how to use BlurHash as an image placeholder, and use the flutter_blurhash package in your flutter application.

https://pub.dev/packages/flutter_blurhash

Introduction

BlurHash is a conservative description of image placeholders. It works by generating a hash string from the picture. The generated hash string will be used to pass the placeholder. This article describes the best way to parse BlurHash strings to be delivered as image placeholders in Flutter applications.

Demo

This demo video shows how to use blurhash in Flutter. It shows how blurhash works with the flutter_blurhash package in your Flutter application. It shows a compact representation of the image placeholder. It will be displayed on your device.

Constructor

Here is the BlurHash constructor:

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 a hash string obtained using the BlurHash algorithm. In case you don't have a hash string right now, you can use their authoritative site blurha. Sh to create a hash string of the picture you need to use.

parameter

Some parameters of BlurHash are:

hash: This parameter is required. Hash to decode
onDecoded: This parameter is used to call back when the hash is decoded
image: This parameter is used to download resources remotely
imageFit: This parameter is used to adapt to the decoded and downloaded image
color: This parameter is used to display the background color before decoding
duration: This parameter is used for the duration of the animation. The default value is const Duration(milliseconds: 1000).
curve: This parameter is used for animation curves. The default is Curves.easeOut.
onStarted: This parameter is used for the callback called when the download starts
onReady: This parameter is used to call back when downloading the image

Implement

Step 1: add dependencies

Add dependencies to the pubspec ーyaml file.

flutter_blurhash: ^0.6.0

Step 2: Import

import 'package:flutter_blurhash/flutter_blurhash.dart';

Step 3: Run the flutter package in the root directory of the application.

$ flutter packages get

How to implement the code in the dart file

You need to implement it in your code separately:

Create a new dart file named main.dart in the lib folder.

Below is a model that only passes hash parameters. Because the Image parameter is not passed, it will display the placeholder until the end of the time.

BlurHash(
  hash: 'LHA-Vc_4s9ad4oMwt8t7RhXTNGRj',
),

When we run the application, we should get the output of the screen, just like the screenshot below.

In the main body, we will add the BlurHash() method. In this method, we will add imageFit, which means you can set how to fit the image to the accessible space by passing the BoxFit enumeration as the imageFit parameter to the constructor. If no parameters are passed, the value defaults to BoxFit.fill. The use of imageFit competition is similar to the appropriate attributes of FittedBox. For now, we will increase the duration which means that after the picture has been effectively downloaded, the picture will be fully active before a given period of time is displayed. The duration can be set by passing the duration respect as a duration contention. If no parameters are passed, the default value 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 that the animation curve can be set by the curve parameter. The default value is Curves.easeOut. Finally, we will add image to indicate the location where the image parameter is passed, and the remote URL of the image as the value. When we run the application, we should get the output of the screen, just like the screenshot below.

Now, we will set the curve means that the animation curve can be set by the curve parameter. The default value is Curves.easeOut. Finally, we will add an image, which means that the image parameter is passed as the value of the remote URL of the image. When we run the application, we should get the output of the screen, just like the screenshot below.

Complete code

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

Concluding remarks

In this article, I briefly explained the basic structure of BlurHash image placeholders; you can modify this code according to your choice. This is a small introduction to BlurHash image placeholder user interaction from my side, it works using Flutter.