How do I update a placeholder image with an async image?

Question

I'm using a manager class to either pull images from a cache or make a network request. I'm using a placeholder image. What's the best way to replace that placeholder image when the proper image is retrieved?

final ItemManager _manager;
final Item _item;
var _itemImage =
  new Image.asset('assets/images/icons/ic_placeholder.png');

@override
Widget build(BuildContext context) {
  _loadImage();
  return new Container(
    child: _itemImage,
  );
}

_loadImage() async {
  var file = await _manager.itemImageForImageUrl(_item.imageUrl);
  _stickerImage = new Image.file(file);
}

Collin Jackson · Accepted Answer · 2017-06-01T02:29:13.413

The FutureBuilder class is designed for cases like this. I would modify _loadImage to return the image instead of setting a member variable. Then you can get rid of initState and modify your build() method as follows:

@override
Widget build(BuildContext context) {
  return new FutureBuilder(
    future: _loadImage(),
    builder: (BuildContext context, AsyncSnapshot<Image> image) {
      if (image.hasData) {
        return image.data;  // image is ready
      } else {
        return new Container();  // placeholder
      }
    },
  );
}

As an aside, you should never mutate member variables of your State without calling setState. Your build function won't be called and this is something that the linter will eventually complain about (as soon as we implement it). But FutureBuilder is a much better fit for your use case because you won't have to worry about what happens if your State is disposed by the time the image finishes loading.

@alardizabal adding to the comment about setState, as you call `_loadImage` in the build function, the setState would result in the build method being called again resulting in _loadImage being called again. Using that construction you should call _loadImage in initState. — Rene, Apr 04 '18 at 08:54

score 2 · Answer 2 · answered Apr 04 '18 at 02:56

2

I'd recommend using flutter_image "to load images from the network with a retry mechanism."

You can pair it with a placeholder like this:

new FadeInImage(
  placeholder: _itemImage,
  image: new NetworkImageWithRetry('https://example.com/img.jpg'),
),

answered Apr 04 '18 at 02:56

Westy92

19,087
4
72
54

Did not work for me. I have images in async await function. How can I display the dynamic images. – Chrisphine Mar 11 '23 at 13:06

How do I update a placeholder image with an async image?

2 Answers2

Linked