如何解决Flutter FutureBuilder的builder无法调用异步函数的问题？

你遇到的问题核心是：FutureBuilder的builder回调是同步函数，不能标记为async，所以里面不能直接用await关键字。直接写await会因为函数缺少async修饰而报错。下面给你两种可行的解决方案：

方案一：嵌套FutureBuilder #

在第一个FutureBuilder获取本地订阅数据后，嵌套另一个FutureBuilder来处理网络请求，用Future.wait同时发起两个网络请求，提升加载效率：

return FutureBuilder(
  future: dbHelper.abonnements(),
  builder: (context, snapshot) {
    if (snapshot.data == null || snapshot.data!.isEmpty) {
      return StartUpScreen();
    } 

    final abonnement = snapshot.data![0];
    final meterId = abonnement.meterId;
    final clientId = abonnement.clientId;

    // 嵌套FutureBuilder处理网络请求
    return FutureBuilder(
      // 同时发起两个网络请求，等待全部完成
      future: Future.wait([
        MeterAPIManager.getMeter(meterId),
        ClientAPIManager.getUser(clientId),
      ]),
      builder: (context, networkSnapshot) {
        if (networkSnapshot.connectionState == ConnectionState.waiting) {
          // 显示加载状态，可替换成你自己的加载组件
          return const Center(child: CircularProgressIndicator());
        } else if (networkSnapshot.hasError) {
          // 处理网络请求错误，比如显示提示或重试按钮
          return const Center(child: Text('加载用户或水表数据失败'));
        } 

        final compteur = networkSnapshot.data![0];
        final user = networkSnapshot.data![1];
        return HomeScreen(abonnement: abonnement, compteur: compteur, user: user);
      },
    );
  },
);

方案二：用StatefulWidget统一管理异步逻辑 #

把所有异步操作（本地数据+网络请求）放到StatefulWidget的initState中，避免嵌套过多，代码结构更清晰：

class YourPage extends StatefulWidget {
  const YourPage({super.key});

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  late Future<(Abonnement, Meter, Client)> _allDataFuture;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化所有异步请求
    _allDataFuture = _fetchAllRequiredData();
  }

  Future<(Abonnement, Meter, Client)> _fetchAllRequiredData() async {
    final abonnements = await dbHelper.abonnements();
    if (abonnements.isEmpty) {
      // 无订阅数据时抛出异常，后续在FutureBuilder中处理跳转
      throw Exception('no_abonnement_data');
    }

    final abonnement = abonnements[0];
    // 并行发起网络请求，比串行更快
    final [compteur, user] = await Future.wait([
      MeterAPIManager.getMeter(abonnement.meterId),
      ClientAPIManager.getUser(abonnement.clientId),
    ]);

    return (abonnement, compteur, user);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _allDataFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          // 判断是否是无订阅数据的异常，跳转启动页
          if (snapshot.error.toString() == 'Exception: no_abonnement_data') {
            return StartUpScreen();
          }
          // 其他错误显示提示
          return const Center(child: Text('加载数据失败，请重试'));
        } 

        final (abonnement, compteur, user) = snapshot.data!;
        return HomeScreen(abonnement: abonnement, compteur: compteur, user: user);
      },
    );
  }
}

注意事项 #

• 两种方案都用了Future.wait来并行发起网络请求，比串行调用await更快，减少用户等待时间。
• 必须处理加载中和错误状态，不能只处理成功场景，避免用户看到空白页面或崩溃。
• 方案二中的_allDataFuture放在initState中，只会在页面初始化时执行一次，不会因为build重新触发请求。

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