How to cache a base64 encoded image in flutter?

Question

I have used Image.memory(base64Decode(encodedString, fit: BoxFit.cover, width: imgWidth,height: imgHeight) to load a base64 encoded image in flutter. In a listview viewing the images causes a flickering. Bcoz each time, the image is loaded again and again for each item in the list. So is there any way to cache a base64 encoded image in flutter?

try https://api.flutter.dev/flutter/painting/MemoryImage-class.html — pskink, Dec 11 '19 at 11:41
@pskink Tried with `MemoryImage-class` still issue persists. — Febin K R, Dec 11 '19 at 11:52
@pskink Like this `Image(image: MemoryImage(base64Decode(encodedString)))` — Febin K R, Dec 11 '19 at 12:00
@pskink The `encodedString` is different for each item in the list. The images are different for almost every items in the list. So calling it only once won't work. — Febin K R, Dec 11 '19 at 12:07
use a list, of `MemoryImage`, not one `MemoryImage` - that list will store several `MemoryImage` each one made from different base64 string — pskink, Dec 11 '19 at 12:10
@pskink Thanks a lott.. It worked.. If u can answer to this post it would be helpful to others too. — Febin K R, Dec 11 '19 at 13:16

score 0 · Answer 1 · answered Jan 09 '23 at 17:04

Instead of calling MemoryImage inside Widget build(), you can initialize the base64 images inside initState().

late List<MemoryImage> _listImages;

@override
void initState(){
  super.initState();
  
  // load images here
  _listImages.add(MemoryImage(imageData));
}

This should prevent the "flickering" happening on the widgets since the Screen is usually refreshed when the state has been changed.

How to cache a base64 encoded image in flutter?

1 Answers1