如何在 Flutter 中创建异步代码？答案

【问题标题】：How to create asynchronous code in Flutter?如何在 Flutter 中创建异步代码？
【发布时间】：2026-01-28 05:55:01
【问题描述】：

在我的代码中，我通过 TextFormFields 获得了一些用户输入，并将它们保存在 Firestore 的地图中。在下一步中，我想用这些数据进行计算，并在同一个小部件中向用户展示。我认为由于保存在数据库中的延迟，我需要等到数据保存。但是我该怎么做呢？这是我要等待的代码：

  void validate() {
    if (_formKey.currentState.validate()) {
      UserManager.userdata["userStats"][0]["userActivity"] = userActivity;
      savetoremote_dynamic(context);
      AppBuilder.of(context).rebuild();
    }
  }

这是重建类，以便更新 UI：

class AppBuilderState extends State<AppBuilder> {

  @override
  Widget build(BuildContext context) {
    return widget.builder(context);
  }

  void rebuild() {
    setState(() {});
  }
}

我希望在保存数据后立即重建 Widget 并将更新的数据显示给用户，如何在此代码中使用 async 和 await？

【问题讨论】：

你可以使用 ChangeProvider 和 listeners
我认为我需要 async、await 和 future，但我不知道如何使用它们
ChangeNotifier* flutter.dev/docs/development/data-and-backend/state-mgmt/simple

标签： database flutter dart asynchronous async-await

【解决方案1】：

我建议您使用 Provider/Riverpod 或任何适合您的状态管理。或者，您可以在从 FireStore 或任何其他 API 加载数据时使用 FutureBuilder 显示指标。

【讨论】：

【解决方案2】：

我不清楚你的 sn-p 中的异步代码是什么。然而，在颤振中，根据异步操作的结果更新 gui 的最小模式是这样的：

在颤振回调中（例如 ElevatedButton.onTap 或 initState，如果代码要在启动时执行；在您的情况下它可以是验证）使用异步代码调用您的方法 - 例如 getUserDataFromFirestore()- 无需等待结果。您通常不能将 validate() 之类的颤振回调标记为 async。
带有异步操作的方法getUserDataFromFirestore()可以用async标记，所以在里面你可以用await future代替future.then()（但它只是语法糖）。

当您获得异步数据时，您可以为变量赋值，例如userData，然后调用 setState() 重新构建。
在 build 方法中，您检查 userData 是否不为空，然后您可以显示用户数据（例如，如果在 Column.children 列表中使用集合）。

如果异步操作必须在启动时执行（页面加载时，或类似情况），FutureBuilder 非常方便：您可以声明Future<User> 字段，而不是User? user 等可空字段：

在您的 State 子类中：

late Future<User> user;

@override
initState() {
  super.initState();
  user = getUserDataFromFirestore();
}

Furure<User> getUserDataFromFirestore() async {
  //your async code; returns the user data
}

@override
build(context) {
  return FutureBuilder(
     future: user,
     builder: (context, asyncSnapshot) {
       if (! asyncSnapshot.hasData) {
          //user data is not available.
          //returns a gui that does not display the user data
       } else {
          //user data is available..
       }
     } 
  );
}

使用此模式的 Flutter 中的最小异步操作的简单示例在此食谱页面中： https://flutter.dev/docs/cookbook/networking/fetch-data

【讨论】：