Flutter BlurHash - Compact representation of a placeholder for an image.

Overview

Flutter Community: flutter_blurhash

pub package Twitter

Flutter BlurHash

Compact representation of a placeholder for an image.

Generation

Capture d’écran 2020-02-21 à 19 11 56

You can use https://blurha.sh/ for testing or use any official api on your server side.

Flutter Code

Constrain your widget render area and let BlurHash fill the pixels.

class BlurHashApp extends StatelessWidget {
  const BlurHashApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("BlurHash")),
      body: const SizedBox.expand(
        child: Center(
          child: AspectRatio(
            aspectRatio: 1.6,
            child: BlurHash(hash: "L5H2EC=PM+yV0g-mq.wG9c010J}I"),
          ),
        ),
      ),
    ),
  );
}
Comments
  • Add BlurHash encoding

    Add BlurHash encoding

    There are some use-cases where it is useful to perform encoding on the device, e.g. when sending large images using e2e encryption.

    Adding encoding to this package would support that use case without including another dependency. I'm not too familiar with the BlurHash algorithm but I suspect this wouldn't add much code to the implementation.

    For reference, here's the blurhash_dart implementation, which itself has no dependencies: https://github.com/justacid/blurhash-dart/blob/master/lib/src/blurhash.dart#L70

    opened by cachapa 12
  • Encoding BlurHash from Image in dart

    Encoding BlurHash from Image in dart

    First of all thank you for introducing us Flutter community with this great tool. It is a game changer. For this to reach to broader developers I think we should be able to encode the image to it's corresponding blurhash string. Are you planning on writing a function which does this on the client. This way we can upload the image along with the blurhash to Firestore and Firebase Storage at the same time. People might not be using server side code(cloud functions) since they will bring extra pricing/delay/performance issues. If this is not a good way, then I hope someone would show an cloud function example in type script.

    opened by aytunch 10
  • Remove dependency on

    Remove dependency on "image" package.

    As we discussed it with Rene at https://github.com/Baseflow/flutter_cached_network_image/issues/386, there is no need to depend on image for the conversion of pixel data to image, the Skia inside the Flutter framework can do it directly. These are the necessary changes. It works on mobile, I still have some problems on Flutter Web (it looks like ui.decodeImageFromPixels() simply never returns), so expect more to come.

    Sorry for the inclusion of class Style, I don't know how Android Studio pulled that off. I simply forked, modified, committed and pushed. :-)

    opened by deakjahn 5
  • Does not work on web

    Does not work on web

    Hello. Very nice package, but it is not working on web even stated so in https://pub.dev/packages/flutter_blurhash

    I noticed you closed an issue 20 days ago about this, but not before fooling a lot around with the package as it was supposed to work on web.

    Could you remove the web compability notice on the package listing until the flutter web framework is compatible....?

    opened by PsychTechApS 4
  • BlurHash widget does not have an error attribute

    BlurHash widget does not have an error attribute

    If you run into an exception trying to download the image (e.g. connection timeout due to bad connection) a red cross with the error message will be shown ontop of the blurhash image. Currently there is no way to disable this behaviour (I'd rather stick with the blur hash over having this ugly cross) or to set a custom error image.

    opened by sentd94 3
  • Workaround for Flutter issue

    Workaround for Flutter issue

    Temporary workaround for https://github.com/flutter/flutter/issues/45190

    On the web, there are various issues with Skia async functions no returning. As I mentioned in that thread, I suspect the HtmlCodec to be at fault. Until such time as this is fixed, I present the following workaround: on Flutter Web, we can create a BMP image on the fly. Considering the small size of the blurhash image, there is really no need for the compression that PNG or JPG could provide, so this is the cheapest temporary solution.

    opened by deakjahn 3
  • Can't compile

    Can't compile

    Using your exemple project with flutter_blurhash: ^0.4.0, I can't compile on Android :

    Compiler message:
    /C:/ProgramData/Flutter/.pub-cache/hosted/pub.dartlang.org/flutter_blurhash-0.4.0/lib/src/blurhash_image.dart:76:10: Error: The method 'objectRuntimeType' isn't defined for the class 'BlurHashImage'.
     - 'BlurHashImage' is from 'package:flutter_blurhash/src/blurhash_image.dart' ('/C:/ProgramData/Flutter/.pub-cache/hosted/pub.dartlang.org/flutter_blurhash-0.4.0/lib/src/blurhash_image.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'objectRuntimeType'.
          '${objectRuntimeType(this, 'BlurHashImage')}(${describeIdentity(blurHash)}, scale: $scale)';
             ^^^^^^^^^^^^^^^^^
    Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
    build failed.
    
    FAILURE: Build failed with an exception.
    

    Any idea how to fix this ?

    opened by Nico04 3
  • Version 0.6.6 -  Huge memory consumption and Crash

    Version 0.6.6 - Huge memory consumption and Crash

    After Upgrading from 0.6.4 to 0.6.6,

    I noticed huge lag while scrolling into multiple images that use BlurHash as loading widget.

    I also noticed significant memory consumption and multiple _spawn stacks being generated.

    Reverting back to 0.6.4 fixes the issue.

    opened by YDA93 2
  • [Feature] add header for download image

    [Feature] add header for download image

    Hi, and thank u for such a good library!

    In my case image on server protected by auth token which should be passed in the Header. Since blurhash used Image.network under the hood now it is impossible to pass token.

    Seems like to reach this goal at the BlurHashState.prepareDisplayedImage instead of Image.network we need use:

    Image(
        image: NetworkImage(
        imagePath,
        headers: {
          HttpHeaders.authorizationHeader: 'token',
        },
    ),
    

    Let me know what u thinking and i can help with implementation

    opened by beerline 2
  • Background issue on PNG image

    Background issue on PNG image

    I am using blurha.sh as mentioned on documentation. While using PNG image, hash effect is still visible on background,

    image

    Top image is using BlurHash and bottom one using Image.network. For some images I like this effect but for some not. How can get the original image after loading like Image.network.

    
    class MyHomePage extends StatelessWidget {
      const MyHomePage({Key? key}) : super(key: key);
    
      final imageUrl =
          "https://flutter.dev/assets/images/homepage/garden-logos-color/google.png";
      final hash =
          "rOByL6JFEoCA,koaRX\$IS~X8kFo#jXfnf*adf,fP0yxC\${+[I^W=otNarqogkEbdbHfRjXW9jDacj]bcoLjXWVjXW,b0WCs;W.jZWqnzWAjXacjr";
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            AspectRatio(
              key: const ValueKey("GBH"),
              aspectRatio: 200 / 67,
              child: BlurHash(
                hash: hash,
                image: imageUrl,
                color: Colors.green,
              ),
            ),
            Image.network(
              imageUrl,
              key: const ValueKey("GMN"),
            )
          ],
        );
      }
    }
    
    
    [√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version
        10.0.19043.1348], locale en-US)
        • Flutter version 2.5.3 at C:\Tools\flutter
        • Upstream repository https://github.com/flutter/flutter.git      
        • Framework revision 18116933e7 (4 weeks ago), 2021-10-15 10:46:35      -0700
        • Engine revision d3ea636dc5
        • Dart version 2.14.4
    
    opened by yeasin50 2
  • Flutter web canvaskit crash  in flutter master 2.6.0 version

    Flutter web canvaskit crash in flutter master 2.6.0 version

    When read blur hash widget, there is error as below: ════════ Exception caught by scheduler library ═════════════════════════════════ The following assertion was thrown during a scheduler callback: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/canvaskit/skia_object_cache.dart:248:12 !browserSupportsFinalizationRegistry is not true

    Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel master, 2.6.0-6.0.pre.146, on macOS 11.0.1 20B29 darwin-x64, locale zh-Hant-TW) [!] Android toolchain - develop for Android devices (Android SDK version 29.0.3) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 12.5.1) [✓] Chrome - develop for the web [✓] Android Studio (version 3.6) [✓] VS Code (version 1.60.1) [✓] Connected device (1 available)

    opened by skypu3 2
  • Added suport for colorBlendMode

    Added suport for colorBlendMode

    We need colorBlendMode in order to build optimized apps and avoid using Opacity Widget above it

    https://docs.flutter.dev/perf/ui-performance#identifying-problems-in-the-gpu-graph

    opened by prologikus 0
  • Universal BlurHash widget

    Universal BlurHash widget

    Remote resource to download image is very specific way to use BlurHash widget. Images could be loaded in many different ways using different protocols. Could be nice to make BlurHash widget universal.

    opened by zs-dima 0
  • Get the hash from an image?

    Get the hash from an image?

    Hi friends,

    I have an issue with flutter_blurhash, how to get the hash code from an image in Flutter? I can't find any details for this :(

    Thanks in advance!

    opened by RoyalCoder88 2
  • Fixed Cannot clone a disposed image

    Fixed Cannot clone a disposed image

    Because Image widget in buildBlurHashBackground does not have errorBuilder, its causing the framework to throw errors as per issues:

    1. https://github.com/fluttercommunity/flutter_blurhash/issues/46
    2. https://github.com/fluttercommunity/flutter_blurhash/issues/40

    Since buildBlurHashBackground is widget function instead of stateless widget this made it even harder to trace where the error is coming from.

    Which was pointing to Flutter image widget only, which I think it should include buildBlurHashBackground too.

    Please Refer to:

    Stackoverflow

    Flutter issue 19269

    If you look at flutter image widget at image.dart line 1141:

    assert(() {
      if (widget.errorBuilder == null) {
        // ignore: only_throw_errors, since we're just proxying the error.
        throw error; // Ensures the error message is printed to the console.
      }
      return true;
    }());
    

    Long story short:

    Your code does not produce this error, our code does. Your code only does not enable us to handle it.

    Kindly merge this.

    Thanks,

    opened by YDA93 9
  • Cannot clone a disposed image

    Cannot clone a disposed image

    I know this is a duplicated issue.

    Please consider a fix. Its causing headache while in development (non fatal exception). As well as in production it's sending so many reports to Crashlytics.

    Non-fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError: Bad state: Cannot clone a disposed image.
    The clone() method of a previously-disposed Image was called. Once an Image object has been disposed, it can no longer be used to create handles, as the underlying data may have been released.. Error thrown Instance of 'ErrorDescription'.
           at Image.clone(Image.java)
           at ImageInfo.clone(image_stream.dart:51)
           at ImageStreamCompleter.setImage(image_stream.dart:635)Ï
    

    Screen Shot 2022-04-21 at 10 38 12 PM

    opened by YDA93 1
Owner
Flutter Community
A central place for all community made Flutter packages. To get started, see the README of the 'community' repository.
Flutter Community
Flutter package for Image Carousel It is an image carousel widget.

Snapshot Carousel Flutter package for Image Carousel It is an image carousel widget. Supported platforms Flutter Android Flutter iOS Flutter web Flutt

Mrigank Anand 12 Jun 3, 2021
A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

Paras Jain 64 Dec 26, 2022
A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content. Installation Add dependency to your pubspec.yaml

Anatoly Pulyaevskiy 272 Dec 23, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Flutter Photo View A simple zoomable image/content widget for Flutter. PhotoView enables images to become able to zoom and pan with user gestures such

Fire Slime Games 1.7k Jan 3, 2023
Flutter plugin that allows you to display multi image picker on iOS and Android. 👌🔝🎉

IMPORTANT: This repository has been archived and no longer mantained. As I don't have time anymore to work on the package it became very outdated. For

Radoslav Vitanov 898 Apr 29, 2021
Image caching system for flutter

image_cacheing image_cacheing is an image caching package. It is currently tested for Android applications. ImageCacheing widget takes url as a param.

evolving_kid 3 May 31, 2021
A simple and easy flutter demo to crop image

flutter_image_crop A simple demo to crop image on flutter easily. A Chinese version of this document can be found here Flutter_image_crop Plugin will

路小飞 3 Jul 8, 2021
A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

Mahesh Jamdade 4 Jan 18, 2022
Simple and effective cross platform image saver for flutter, supported web and desktop

Simple and effective cross platform image saver for flutter, supported web and desktop

7c00 3 Oct 5, 2022
A flutter package to convert any widget to an Image.

Davinci A package to convert any widget to an image which can be saved locally or can be shared to other apps and chats. ?? Preview ℹ️ Usage Prerequis

Sai Gokula Krishnan 37 Dec 20, 2022
Flutter Image Upload From Gallery

Image Upload From Gallery Image upload from gallery to Backend Dependencies image_picker: ^0.8.4+1 http: ^0.13.3 dio: ^4.0.0 Getting Started Image upl

Fatih Baycu 2 Oct 6, 2021
Multi image pixker using the image_picker package in flutter

multi_image_selection A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Ambaliya Avnit Karshanbhai 1 Oct 13, 2021
flutter image demo 主要展示图片与动画处理的案例。比如:网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter_image_demo flutter image demo 主要展示图片与动画处理的案例。 比如:网络图片加载、图片预览、图片缩放、json动画处理等等。 本项目使用到以下插件: cached_network_image、 photo_view 、 lottie 、 flutter_

null 2 Feb 27, 2022
Flutter Package to Pick Image From Gallery or Camera

image_picker_gallery_camera Flutter Package to Pick Image From Gallery or Camera Getting Started A Flutter plugin for iOS and Android for picking imag

Sayandh KP 8 Oct 5, 2022
A flutter package for image carousels.

flutter_image_carousel A flutter package for image carousels. Supports both Asset and Network images. Example new ImageCarousel( <ImageProvider>[

Theo Bouwman 53 Aug 9, 2021
Flutter gallery - Image, Audio, Video & File.

Flutter Gallery Getting Started For help getting started with Flutter, view our online documentation.

Vivek Sharma 55 Sep 26, 2022
A Flutter image editor with support for paint, text, filters, emojis, stickers and more

Flutter Image Editor Plugin with simple, easy support for image editing using Paints, Text, Filters, Emoji and Sticker like stories.

null 44 Dec 22, 2022
Flutter package for image editing

You can edit image using this package and also you can create flex preview image by setting foreground to null. For now, you can use only asset files.

Berkay CEYLAN 9 Nov 21, 2022
Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Mahdi 225 Jan 6, 2023