如何给Flutter带实时更新的Stateful Widget传入用户ID参数

我刚开始用Firestore，同时在学Flutter和Dart。我写了两个展示users集合中用户年龄的Widget：

• 一个Stateless Widget可以接收用户ID参数，但没法处理实时数据更新
• 一个Stateful Widget能处理实时更新，但不知道怎么改才能让它也接收用户ID参数
  我参照Stateless Widget的写法改Stateful Widget没成功，应该是缺乏相关实践经验，求帮忙。

原代码 #

无状态组件代码 #

class GetAge extends StatelessWidget {
  final String documentId;

  const GetAge(this.documentId);

  @override
  Widget build(BuildContext context) {
    CollectionReference users =
        FirebaseFirestore.instance.collection('Users');

    return FutureBuilder<DocumentSnapshot>(
      future: users.doc(documentId).get(),
      builder:
          (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
        if (snapshot.hasError) {
          return const Text("Something went wrong");
        }

        if (snapshot.hasData && !snapshot.data!.exists) {
          return const Text("Document does not exist");
        }

        if (snapshot.connectionState == ConnectionState.done) {
          Map<String, dynamic> data =
              snapshot.data!.data() as Map<String, dynamic>;
          return Text('Age : ${data['age']} €');
        }

        return const Text("loading");
      },
    );
  }
}

有状态组件代码 #

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

  @override
  State<getAgeRT> createState() => _getAgeRTState();
}

class _getAgeRTState extends State<getAgeRT> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
        stream: FirebaseFirestore.instance
            .collection('Users')
            .doc('User1')
            .snapshots(),
        builder: (BuildContext context,
            AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>> snapshot) {
          if (snapshot.hasError) {
            return const Text('Something went wrong');
          }

          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Text("Loading");
          }

          Map<String, dynamic> data =
              snapshot.data!.data() as Map<String, dynamic>;
          return Text(" age :  ${data['age']} ");
        });
  }
}

解决方案 #

要给Stateful Widget添加参数，核心是在StatefulWidget类中定义参数，然后在对应的State类里通过widget.参数名访问。具体修改如下：

修改后的完整代码 #

class GetAgeRT extends StatefulWidget {
  // 1. 添加documentId参数，标记为final
  final String documentId;

  // 2. 构造函数初始化参数，同时传递key
  const GetAgeRT({super.key, required this.documentId});

  @override
  State<GetAgeRT> createState() => _GetAgeRTState();
}

class _GetAgeRTState extends State<GetAgeRT> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
        // 3. 使用widget.documentId替换硬编码的User1
        stream: FirebaseFirestore.instance
            .collection('Users')
            .doc(widget.documentId)
            .snapshots(),
        builder: (BuildContext context,
            AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>> snapshot) {
          if (snapshot.hasError) {
            return const Text('Something went wrong');
          }

          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Text("Loading");
          }

          // 新增文档不存在的判断，和无状态组件保持一致
          if (!snapshot.data!.exists) {
            return const Text("Document does not exist");
          }

          Map<String, dynamic> data =
              snapshot.data!.data() as Map<String, dynamic>;
          return Text(" age :  ${data['age']} ");
        });
  }
}

使用方式 #

调用时和无状态组件一样传入用户ID即可：

GetAgeRT(documentId: '你的用户ID')

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