如何在单个FutureBuilder中调用两个返回Future值的Future函数？

你可以使用Future.wait()将多个异步任务合并为一个Future，这样就能只用一个FutureBuilder处理所有异步结果，彻底避免嵌套结构的混乱。

核心实现逻辑： #

• 用Future.wait([func1(), func2()])同时触发两个异步函数，它会返回一个包含两个任务结果的Future<List<dynamic>>，若两个函数返回类型明确，可指定对应泛型提升类型安全性。
• 在单个FutureBuilder中仅需一次状态检查，即可同时获取两个异步任务的返回值。
• 统一处理加载、错误状态，无需重复编写CircularProgressIndicator这类通用Widget。

示例代码： #

return FutureBuilder<List<dynamic>>(
  future: Future.wait([func1(), func2()]),
  builder: (context, AsyncSnapshot<List<dynamic>> snapshot) {
    // 统一处理加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    // 可选：统一处理错误状态
    if (snapshot.hasError) {
      return Text('加载失败: ${snapshot.error}');
    }
    // 所有数据加载完成，取出两个任务的结果
    final data1 = snapshot.data![0];
    final data2 = snapshot.data![1];
    
    // 返回最终业务Widget
    return YourTargetWidget(data1: data1, data2: data2);
  },
);

额外优化建议： #

• 避免重复请求：不要直接在future参数中调用异步函数（如future: func1()），否则每次Widget重建都会重新发起请求。建议在initState中初始化合并后的Future并存储：

late final Future<List<dynamic>> _combinedFuture;

@override
void initState() {
  super.initState();
  _combinedFuture = Future.wait([func1(), func2()]);
}

// 在FutureBuilder中使用存储的Future
future: _combinedFuture,

• 类型安全优化：若两个异步函数返回不同类型，可明确指定泛型，比如：

// 假设func1返回User，func2返回List<Order>
future: Future.wait([func1() as Future<User>, func2() as Future<List<Order>>]),

内容的提问来源于stack exchange，提问作者WasimSafdar