Flutter Firebase：从搜索列表跳转展示选中用户信息

问题背景 #

开发类社交应用的用户搜索功能，已基于Firebase完成用户搜索、列表展示及页面跳转逻辑，点击用户列表项后需在ProfileOthers页面展示选中用户的详细信息，需明确如何获取并传递Firestore快照数据到目标页面，或提供更优替代方案。

现有代码梳理 #

已实现的核心逻辑：

• 搜索框：通过TextField的onChanged更新搜索关键词name
• 用户列表：通过StreamBuilder监听Firestoreusers集合的实时快照，根据关键词过滤并展示用户
• 页面跳转：点击ListTile时，尝试将当前用户的Map数据传递给ProfileOthers页面

解决方案 #

方案一：直接使用已传递的Map数据展示 #

你当前的代码已经在跳转时将用户数据data传递给了ProfileOthers，只需在ProfileOthers的状态类中通过widget.data获取数据，即可构建展示UI：

class _ProfileOthersState extends State<ProfileOthers> {
  @override
  Widget build(BuildContext context) {
    // 通过widget.data获取传递过来的用户数据
    final userData = widget.data;
    return Scaffold(
      appBar: AppBar(title: Text(userData['name'])),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: NetworkImage(userData['userImage']),
            ),
            const SizedBox(height: 16),
            Text(
              userData['name'],
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(
              userData['email'],
              style: const TextStyle(fontSize: 16, color: Colors.grey),
            ),
            // 可添加更多用户信息字段的展示
          ],
        ),
      ),
    );
  }
}

方案二：传递Firestore文档ID，实时拉取最新数据（更优方案） #

直接传递Map数据可能存在数据过时的问题，更可靠的方式是传递Firestore文档的ID，在ProfileOthers页面通过ID监听该文档的实时快照，确保展示的是最新数据：

1. 修改列表跳转逻辑，传递文档ID

在ListView.builder的onTap中，获取文档ID并传递：

onTap: () {
  // 获取当前文档的ID
  final docId = snapshot.data!.docs[index].id;
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ProfileOthers(docId: docId),
    ),
  );
}

2. 修改ProfileOthers的StatefulWidget定义

class ProfileOthers extends StatefulWidget {
  const ProfileOthers({super.key, required this.docId});

  final String docId;

  @override
  State<ProfileOthers> createState() => _ProfileOthersState();
}

3. 在状态类中监听文档快照并展示数据

class _ProfileOthersState extends State<ProfileOthers> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("用户资料")),
      body: StreamBuilder<DocumentSnapshot>(
        // 监听指定ID的用户文档
        stream: FirebaseFirestore.instance
            .collection('users')
            .doc(widget.docId)
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (!snapshot.hasData || snapshot.data!.data() == null) {
            return const Center(child: Text("用户不存在"));
          }
          final userData = snapshot.data!.data() as Map<String, dynamic>;
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CircleAvatar(
                  radius: 50,
                  backgroundImage: NetworkImage(userData['userImage']),
                ),
                const SizedBox(height: 16),
                Text(
                  userData['name'],
                  style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 8),
                Text(
                  userData['email'],
                  style: const TextStyle(fontSize: 16, color: Colors.grey),
                ),
                // 其他用户信息展示
              ],
            ),
          );
        },
      ),
    );
  }
}

方案对比 #

• 方案一：实现简单，无需额外网络请求，但数据是跳转时的快照，无法实时更新
• 方案二：基于文档ID实时监听，确保数据最新，适合需要动态同步用户资料的场景，推荐使用

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