Flutter如何让FutureBuilder等待两个异步函数完成后再构建？

你的原代码逻辑本身是正确的——通过await functionA(); await functionB();顺序等待两个异步函数完成后才返回，但出现提前构建的问题，大概率是FutureBuilder绑定的Future被重复创建导致的，比如直接在build方法里调用futureInit()，每次Widget重建都会重新触发异步任务，看起来像是functionA完成就开始构建，实际是新的任务又启动了。

下面是两种可靠的解决方式：

方式一：并行执行异步任务（效率更高） #

如果functionA和functionB之间没有依赖关系，可以用Future.wait让它们并行执行，等两个任务都完成后再触发FutureBuilder的构建：

// 定义并行执行的初始化任务
Future<void> futureInit() async {
  // 传入异步函数列表，等待所有任务完成
  await Future.wait([
    functionA(),
    functionB(),
  ]);
}

方式二：确保Future只初始化一次 #

不管是顺序还是并行执行，都要避免在build方法中直接创建Future，而是在initState中初始化并保存到状态变量里，防止重复执行：

class YourWidget extends StatefulWidget {
  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  // 保存初始化任务的Future，只创建一次
  late Future<void> _initFuture;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化，确保只执行一次
    _initFuture = futureInit();
  }

  Future<void> futureInit() async {
    await functionA();
    await functionB();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // 绑定提前初始化好的Future
      future: _initFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          // 两个异步函数都完成，构建目标Widget
          return Container(
            child: Text("初始化完成"),
          );
        } else {
          // 加载中状态
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

关键注意点 #

• 永远不要在build方法中直接创建Future（比如future: futureInit()），因为build会被多次调用，导致异步任务重复执行，引发状态混乱。
• 如果functionA和functionB有依赖关系（比如functionB需要functionA的返回值），就用顺序await的方式；无依赖则用Future.wait提升执行效率。

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