Display Blob as Image in Flutter

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!

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!

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 blobimport 'dart:convert';dynamic? blob = yourJSONMapHere['yourJSONKeyHere']; // Question mark after the keyword to make it nullable// Declare variable to save the image latervar 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);