Flutter异步获取Firebase用户数据展示Profile页面问题求助

问题原因 #

1. 直接调用异步方法返回Future实例：displayUser()是异步方法（带async），直接赋值给user得到的是Future<Map<String, dynamic>>对象，而非实际的用户数据Map，所以Text组件会打印出Instance of Future<...>。
2. build方法不能设为async：StatelessWidget的build方法要求同步返回Widget类型，改成async后返回的是Future<Widget>，不符合重写规则，因此报错。

解决方案：使用FutureBuilder处理异步数据 #

Flutter提供FutureBuilder组件专门用于处理异步数据的加载与展示，它会根据异步任务的状态（加载中、成功、失败）自动更新UI。

修改后的完整代码 #

class ProfileScreen extends StatelessWidget {
  ProfileScreen({super.key});

  // 保留原有的异步获取用户数据方法
  Future<Map<String, dynamic>> displayUser() async {
    final User? currentUser = FirebaseAuth.instance.currentUser;
    if (currentUser == null) {
      return {}; // 处理用户未登录的情况
    }
    final userUid = currentUser.uid;
    final ref = FirebaseDatabase.instance.ref();
    final resSnapshot = await ref.child('/utilisateur/' + userUid).get();
    final Map<String, dynamic> user = {'id': userUid};

    if (resSnapshot.exists) {
      for (var value in resSnapshot.children) {
        String key = value.key as String;
        var val = value.value;
        user[key] = val;
      }
    } else {
      print('No data available.');
    }
    return user;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile'),
      ),
      body: Align(
        alignment: Alignment.topLeft,
        child: FutureBuilder<Map<String, dynamic>>(
          future: displayUser(),
          builder: (context, snapshot) {
            // 加载中状态：显示加载提示
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            }
            // 错误状态：显示错误信息
            if (snapshot.hasError) {
              return Center(child: Text('加载失败: ${snapshot.error}'));
            }
            // 无数据状态
            if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return const Center(child: Text('无用户数据'));
            }
            // 成功获取数据：展示用户信息
            final user = snapshot.data!;
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Prénom : ${user['prénom'] ?? 'N/A'}\nNom : ${user['nom'] ?? 'N/A'}\nEmail : ${user['email'] ?? 'N/A'}',
                  textWidthBasis: TextWidthBasis.longestLine,
                ),
              ],
            );
          },
        ),
      ),
      persistentFooterButtons: [
        SignOutButton(),
        BottomNavBar(),
      ],
    );
  }
}

关键说明 #

• FutureBuilder的future参数传入displayUser()，指定泛型Map<String, dynamic>明确返回类型。
• 根据snapshot.connectionState判断加载状态，展示对应的UI：
  • ConnectionState.waiting：显示加载指示器
  • snapshot.hasError：处理加载错误
  • snapshot.hasData：成功获取数据后，从snapshot.data中取出用户Map，展示对应字段（如果你的数据库字段名不同，请自行修改）。
• 新增了用户未登录的判断，避免userUid为空的异常。

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