Flutter中如何按顺序向List添加FutureBuilder获取的snapshot.data？

问题根源 #

你当前的写法有两个核心问题：

1. FutureBuilder的builder会多次触发：从waiting到done的状态变化会重复执行stringList.add(snapshot.data!)，导致列表出现重复数据。
2. 异步请求完成顺序不可控：多个独立的下载请求完成时间有差异，直接用add会按请求完成顺序插入，而非你期望的发起顺序。

方案一：批量请求+Future.wait（推荐） #

如果需要按固定顺序获取多个文件的下载链接，最可靠的方式是用Future.wait批量处理所有异步请求，它会严格按照你传入的Future列表顺序返回结果。

示例代码：

// 假设你有按顺序排列的profileUrl列表
List<String> profileUrls = ["user1_profile", "user2_profile", "user3_profile"];
List<String> stringList = [];

@override
void initState() {
  super.initState();
  _fetchAllDownloadUrls();
}

Future<void> _fetchAllDownloadUrls() async {
  // 把每个profileUrl转换成对应的下载请求Future
  List<Future<String>> downloadFutures = profileUrls.map((url) {
    return storage.ref('widgetsProfile/$url').getDownloadURL();
  }).toList();

  // Future.wait会等待所有请求完成，结果顺序和传入的Future顺序完全一致
  List<String> orderedResults = await Future.wait(downloadFutures);
  
  setState(() {
    stringList = orderedResults;
  });
}

这种方式既保证了顺序，又避免了重复添加的问题，还能统一处理加载状态。

方案二：绑定索引，指定位置插入（适合逐个渲染UI的场景） #

如果必须用多个FutureBuilder逐个渲染UI，可以给每个请求绑定对应的索引，完成时将结果插入列表的指定位置，而非用add追加。

示例代码：

// 初始化列表为对应长度的空占位，保证索引位置存在
List<String> stringList = List.filled(profileUrls.length, "");

// 循环生成对应索引的FutureBuilder
for (int i = 0; i < profileUrls.length; i++) {
  final currentIndex = i;
  FutureBuilder(
    future: storage.ref('widgetsProfile/${profileUrls[currentIndex]}').getDownloadURL(),
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
        // 仅当对应位置为空时更新，避免重复赋值
        if (stringList[currentIndex].isEmpty) {
          setState(() {
            stringList[currentIndex] = snapshot.data!;
          });
        }
        // 渲染你的UI
        return Row(
          children: [
            SizedBox(
              height: 50,
              width: 50,
              child: FittedBox(
                fit: BoxFit.contain,
                child: CircleAvatar(
                  backgroundColor: Colors.transparent,
                  backgroundImage: NetworkImage(snapshot.data!),
                  radius: 10.0,
                ),
              ),
            ),
            Text(fullName),
          ],
        );
      }
      return Container();
    },
  );
}

这种方式确保每个请求的结果都存入列表的对应索引位置，完全符合你期望的顺序。

内容的提问来源于stack exchange，提问作者It'sPhil