Search code examples
flutterimagedartflutter-getx

flutter - Image Widget how to show multi network images at the same time?

On my widget,
I have 3 Image Widgets to load 3 image's url.
As we all know, 3 Image Widgets load images has time difference ,
But I have a requirement:
After 3 images all downloaded, then 3 Image Widgets show these 3 images at the same time,
how to do?

Solution

  • Use precache with FutureBuilder as below.

    FutureBuilder(
future: Future.wait([
     precacheImage(NetworkImage('url_1'), context),
     precacheImage(NetworkImage('url_2'), context),
     //... More futures
]),
builder: (
   context, 
   // List of booleans(results of all futures above)
   AsyncSnapshot<List<bool>> snapshot, 
){
   if (!snapshot.hasData) { 
      return CircularProgressIndicator();
   }

   return Image.network('url_1');

})
);