Flutter：如何在使用 firebase 时显示购物车中的商品数量

Question

我正在使用 flutter 和 firebase 构建电子商务应用程序。我将购物车数据存储在 firestore 中每个用户的嵌套集合中，我想在购物车图标上方显示购物车中的商品数量，但我不知道如何实时获取。

这是我主页的代码：

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 5, vsync: this, initialIndex: 0);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: TabBar(
        controller: _tabController,
        labelColor: Colors.yellow[800],
        unselectedLabelColor: Colors.grey[800],
        indicatorColor: Colors.transparent,
        tabs: [
          Tab(icon: Icon(Icons.local_grocery_store_outlined)),
          Tab(
            icon: Icon(Icons.card_giftcard_outlined),
          ),
          Tab(
            icon: Icon(Icons.fastfood_outlined),
          ),
          Tab(
            icon: Stack(
              children: [
                Icon(Icons.shopping_bag_outlined),
                new Positioned(
                    top: 0.0,
                    right: 0.0,
                    child: CircleAvatar(
                      radius: 8.0,
                      backgroundColor: Colors.yellow[800],
                      child: Center(
                        child: Container(
                          padding: EdgeInsets.all(2),
                          child: Text(
                              /*Number of item in cart*/,
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 10.0,
                                  fontWeight: FontWeight.w500),
                            ),
                          }),
                        ),
                      ),
                    )),
              ],
            ),
          ),
          Tab(
            icon: Icon(Icons.person_outline_outlined),
          ),
        ],
      ),
      body: TabBarView(controller: _tabController, children: [
        Store(),
        Text("page"),
        Text("page"),
        CartPage(),
        UserPage()
      ]),
    );
  }
}

我正在使用 StreamBuilder 向用户显示购物车。

我的 Firestore 结构