Display Blob as Image in Flutter

Question

Does anyone know how to convert a Blob into an image with Flutter? It looks like the 'dart:html' library is not available in Flutter. Any help is appreciated. Thank you!

Eveland

Great! Please self-answer your question. That's allowed, and the best way to share your answer. – Matherly

@SethLadd Thank you! Done. 👍🏼 – Eveland

Answer 1

If anyone is interested, I found the solution:

Grab the blob from JSON:

var blob = yourJSONMapHere['yourJSONKeyHere'];

var image = BASE64.decode(blob); // image is a Uint8List

Now, use image in a Image.memory

new Container( child: new Image.memory(image));

This worked for me!

Eveland

hi Kyle Stokes, is possible convert normal image to blob? – Harlequinade

how to convert an image to a blob? – Toadflax

Answer 2

NOT FOUND!!! For ME.

var image = BASE64.decode(blob);

NOT FOUND!!! For ME.

I found the solution 2020 - October:

import 'dart:convert';
import 'dart:typed_data';

Grab the blob from JSON:

var blob = yourJSONMapHere['yourJSONKeyHere'];

Uint8List image = Base64Codec().decode(blob); // image is a Uint8List

Now, use image in a Image.memory

new Container( child: new Image.memory(image));

This worked for me!

Subset

what that mean json map and key? any example? – Powerboat

Answer 3

Since the introduction of null-safety with Flutter 2.0 in April 2021, it is important to make sure that your code is null safe. Here is an improvement of the answer by Andrey Araya above. Since var is non-nullable, I used the dynamic keyword instead :

// Import dart:convert to help with the decoding of the blob
import 'dart:convert';

dynamic? blob = yourJSONMapHere['yourJSONKeyHere']; // Question mark after the keyword to make it nullable

// Declare variable to save the image later
var image;

if (blob != null) {
   // Only decode if blob is not null to prevent crashes
   image = base64.decode(blob);
}

You can then render your image using the Image.memory widget.

Image.memory(image);

Janelljanella

Answer 4

I had this problem too, i know the solution now, after many attempts: Dont forget to upvote!

Uint8List image = Uint8List.fromList(blob.toBytes());

And to see it:

Image.memory(image);

Nitrification