CODEWITHSUNDEEP
imagedartblobflutter
Kyle Stokes
Kyle Stokes

Reputation: 321

Display Blob as Image in Flutter

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!

Upvotes: 9

Views: 20385

Answers (4)

Invictus Warrior
Invictus Warrior

Reputation: 52

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

Upvotes: 0

Kenneth Murerwa
Kenneth Murerwa

Reputation: 888

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

Upvotes: 0

Andrey Araya
Andrey Araya

Reputation: 99

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!

Upvotes: 4

Kyle Stokes
Kyle Stokes

Reputation: 321

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!

Upvotes: 21

Related Questions