Flutter如何在Text组件中使用async异步函数返回的String值

问题根源 #

1. 你定义的numberOfChildren是getChildren函数内部的局部变量，作用域仅限制在函数体内，组件build方法无法访问该变量。
2. 异步调用语法错误：await仅作用于snapshots()方法，后续的length、toString()操作并未等待异步结果返回就执行，无法得到正确的统计值。
3. Firestore查询逻辑错误：snapshots()返回的是实时数据流，若仅需要一次性统计集合数量，应该调用get()方法获取静态查询结果。

场景1：仅需一次性查询数量 #

• 第一步：在State类中定义成员变量存储查询结果和加载状态

class YourWidgetState extends State<YourWidget> {
  String? _numberOfChildren;
  bool _isLoading = true;
  String? uid; // 你的uid赋值逻辑保持原有即可

• 第二步：在initState生命周期中触发异步查询，查询完成后调用setState更新状态

@override
  void initState() {
    super.initState();
    getChildren();
  }

  Future<void> getChildren() async {
    try {
      final querySnapshot = await FirebaseFirestore.instance
          .collection("children")
          .where("parentUID", isEqualTo: uid)
          .get();
      final count = querySnapshot.size;
      setState(() {
        _numberOfChildren = count.toString();
        _isLoading = false;
      });
    } catch (e) {
      // 异常处理可按需自定义
      setState(() {
        _numberOfChildren = "0";
        _isLoading = false;
      });
    }
  }

• 第三步：build方法中根据状态渲染对应组件

@override
  Widget build(BuildContext context) {
    return _isLoading 
        // 加载中可自定义显示样式，此处用加载动画示例
        ? const CircularProgressIndicator()
        : Text(
            'Children: $_numberOfChildren',
            style: const TextStyle(
              fontSize: 22,
              color: Color(0xff74828E),
              fontFamily: 'Rubik',
              fontWeight: FontWeight.w900,
            ),
          );
  }
}

场景2：需要实时监听数量变化 #

如果需要children集合数据变更时自动更新显示数量，直接用StreamBuilder实现即可，无需单独维护状态变量：

@override
Widget build(BuildContext context) {
  return StreamBuilder(
    stream: FirebaseFirestore.instance
        .collection("children")
        .where("parentUID", isEqualTo: uid)
        .snapshots(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      }
      if (snapshot.hasError) {
        return const Text(
          'Children: 0',
          style: TextStyle(
            fontSize: 22,
            color: Color(0xff74828E),
            fontFamily: 'Rubik',
            fontWeight: FontWeight.w900,
          ),
        );
      }
      final count = snapshot.data?.size ?? 0;
      return Text(
        'Children: $count',
        style: const TextStyle(
          fontSize: 22,
          color: Color(0xff74828E),
          fontFamily: 'Rubik',
          fontWeight: FontWeight.w900,
        ),
      );
    },
  );
}

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