CODEWITHSUNDEEP
jsonflutterdart
Victor
Victor

Reputation: 141

How do I get data from this json field?

How are you doing?

I'm trying to get data from a json to show on a screen that should be like the image below. I'm able to get most of the data, except for one field coded as String which consists of the image and a description like this one:

"lessonText": "{\"ops\":[{\"insert\":{\"image\":\"data:image/jpeg;base64,(IMAGE CODE HERE)=\"}},{\"attributes\":{\"color\":\"#444444\"},\"insert\":\"(LESSON TEXT HERE)\"},{\"insert\":\"\\n\"}]}",

How do I extract data from here? I have tried to convert this to a Map but it is not working.

Thanks for the help!

Desired screen

Upvotes: 0

Views: 184

Answers (2)

Claudio Redi
Claudio Redi

Reputation: 68400

Something in line with this should give you the image

// json string containing the base64 image string
String jsonString = "{\"ops\":[{\"insert\":{\"image\":\"data:image/png;base64,(IMAGE CODE HERE)=\"}},{\"attributes\":{\"color\":\"#444444\"},\"insert\":\"(LESSON TEXT HERE)\"},{\"insert\":\"\\n\"}]}";

// convert the string to a map structure
Map<String, dynamic> json = jsonDecode(jsonString);

// extract the image string
String imageString = json['ops'][0]['insert']['image'];

// extract the base64 string
var prefix = "data:image/png;base64,";
var imageBase64String = imageString.substring(prefix.length);

// decode the base 64 string
var bytes = base64Decode(imageBase64String);

// build the image widget from bytes
var imageWidget = Image.memory(bytes);

Upvotes: 2

Gregory Conrad
Gregory Conrad

Reputation: 1577

As I mentioned in the comments, use a combination of decoding the base64 string to bytes and then loading the image from memory. See the the relevant documentation for base64Decode and Image.memory. If you would like a full code sample just let me know and I would be happy to throw one together.

Note: you should run the base64Decode method asynchronously, as it may take some time to decode an entire image (especially on lower-end hardware).

Upvotes: 1

Related Questions