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!


Solution 1: Kyle Stokes

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!


Solution 2: Andrey Araya

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!


Solution 3: Kenneth Murerwa

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);


Solution 4: Invictus Warrior

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);