Flutter中如何在FutureBuilder里使用Firestore异步获取的AppUser数据？

问题 #

我是Flutter新手，尝试从Firestore加载数据并在FutureBuilder中使用。由于UI构建依赖这些数据，必须等数据加载完成才能构建UI。

我通过自定义异步函数getUserfromFirestore获取数据，该函数返回包含Firestore映射数据的AppUser对象，且已通过调试确认对象数据完整。

但现在获取到的是AppUser的Future类型对象，而非实际带数据的对象。比如执行debugPrint(${appUser.currentTimeline})时，出现错误：

The getter 'currentTimeline' isn't defined for the type Future<AppUser>

请问如何访问异步函数返回的实际AppUser对象？

以下是我的代码：

class _HomePageState extends State<HomePage> {

  late Future<AppUser?> appUser; //appUser是包含多个参数的对象。

  @override
  initState() {
    super.initState();
    // 获取数据并创建appUser对象
    appUser = UserService().getUserfromFirestore(); 
  }

  // 页面基本结构
  @override
  Widget build(BuildContext context) {
       return FutureBuilder( // 使用FutureBuilder以等待Firestore拉取用户数据...
        future: appUser, // 需等待appUser加载完成才能继续构建...
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            debugPrint("The AsyncSnapshot has data.");
            debugPrint('${appUser.currentTimeline}');
          }
          return ColorfulSafeArea( /* this builds the UI */);
        }
      );
}

解决方法 #

核心错误是直接访问了Future<AppUser?>类型的appUser变量的属性，实际的AppUser实例存储在FutureBuilder的AsyncSnapshot对象里，也就是snapshot.data。

修正步骤：

• 从snapshot中取实际对象：在snapshot.hasData分支里，通过snapshot.data拿到异步返回的AppUser?实例，再访问其属性。
• 处理null情况：因为Future返回的是AppUser?，需先判断对象不为null再访问属性，避免空指针错误。
• 指定泛型类型：给AsyncSnapshot指定AppUser?泛型，让代码类型更安全。

修正后的代码示例：

class _HomePageState extends State<HomePage> {

  late Future<AppUser?> appUser;

  @override
  initState() {
    super.initState();
    appUser = UserService().getUserfromFirestore(); 
  }

  @override
  Widget build(BuildContext context) {
       return FutureBuilder<AppUser?>( // 指定泛型类型
        future: appUser,
        builder: (BuildContext context, AsyncSnapshot<AppUser?> snapshot) {
          // 处理不同状态：加载中、有数据、无数据/错误
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 加载中显示占位UI
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            // 加载出错显示错误提示
            return Center(child: Text('加载失败: ${snapshot.error}'));
          } else if (snapshot.hasData && snapshot.data != null) {
            // 拿到实际的AppUser实例
            final AppUser user = snapshot.data!;
            debugPrint("The AsyncSnapshot has data.");
            debugPrint('${user.currentTimeline}'); // 正确访问属性
            // 构建依赖user数据的UI
            return ColorfulSafeArea( /* 传入user数据构建UI */);
          } else {
            // 无数据的情况
            return const Center(child: Text('无用户数据'));
          }
        }
      );
}

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