flutter - Image Widget 如何同时展示多张网络图片？

Question

在我的小部件上，
我有 3 个图像小部件来加载 3 个图像 url。
众所周知，3个Image Widgets加载图片是有时间差的，
但是我有一个需求：
3个图片全部下载完后，3个Image Widgets同时显示这3个图片，
怎么办？

Answer 1

Image.network(
                  widget.networkUrl,
                  fit: BoxFit.fill,
                  loadingBuilder: (BuildContext context, Widget child,
                      ImageChunkEvent? loadingProgress) {
                    if (loadingProgress == null) return child;
                    return Center(
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded /
                                loadingProgress.expectedTotalBytes!
                            : null,
                      ),
                    );
                  },
                ),

试试这个

Answer 2

如下使用 FutureBuilder 的预缓存。

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');

})
);