基于FireStore集合实现Flutter动态TabBar展示分类商品

1. 添加必要依赖 #

先在pubspec.yaml中配置Firebase相关依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  cloud_firestore: ^4.8.4

执行flutter pub get安装依赖，同时完成Firebase项目的Android/iOS端初始化配置。

2. 定义商品数据模型 #

创建product.dart文件，将FireStore文档转为实体类，简化数据处理：

class Product {
  final String name;
  final String price;
  final String category;

  Product({
    required this.name,
    required this.price,
    required this.category,
  });

  // 从FireStore文档快照生成Product对象
  factory Product.fromDocumentSnapshot(DocumentSnapshot doc) {
    return Product(
      name: doc['name'],
      price: doc['price'],
      category: doc['category'],
    );
  }
}

3. 实现商品按分类分组 #

编写工具方法，将商品列表按分类进行分组：

Map<String, List<Product>> groupProductsByCategory(List<Product> products) {
  final Map<String, List<Product>> groupedMap = {};
  for (var product in products) {
    if (!groupedMap.containsKey(product.category)) {
      groupedMap[product.category] = [];
    }
    groupedMap[product.category]!.add(product);
  }
  return groupedMap;
}

4. 构建TabBar与商品列表页面 #

使用StreamBuilder监听FireStore数据变化，结合DefaultTabController实现Tab切换功能：

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'product.dart';

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

  @override
  State<ProductCategoryTabs> createState() => _ProductCategoryTabsState();
}

class _ProductCategoryTabsState extends State<ProductCategoryTabs> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('商品分类'),
        bottom: StreamBuilder<QuerySnapshot>(
          stream: FirebaseFirestore.instance.collection('products').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return const TabBar(tabs: [Tab(child: CircularProgressIndicator())]);
            }
            // 转换所有文档为Product对象
            final List<Product> products = snapshot.data!.docs
                .map((doc) => Product.fromDocumentSnapshot(doc))
                .toList();
            // 按分类分组并提取分类列表
            final groupedProducts = groupProductsByCategory(products);
            final categories = groupedProducts.keys.toList();

            return TabBar(
              isScrollable: true,
              tabs: categories.map((category) => Tab(text: category)).toList(),
            );
          },
        ),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: FirebaseFirestore.instance.collection('products').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
            return const Center(child: Text('暂无商品数据'));
          }

          final List<Product> products = snapshot.data!.docs
              .map((doc) => Product.fromDocumentSnapshot(doc))
              .toList();
          final groupedProducts = groupProductsByCategory(products);
          final categories = groupedProducts.keys.toList();

          return TabBarView(
            children: categories.map((category) {
              final categoryProducts = groupedProducts[category]!;
              return ListView.builder(
                padding: const EdgeInsets.all(16),
                itemCount: categoryProducts.length,
                itemBuilder: (context, index) {
                  final product = categoryProducts[index];
                  return Card(
                    child: ListTile(
                      title: Text(product.name),
                      subtitle: Text('价格: ${product.price} 元'),
                    ),
                  );
                },
              );
            }).toList(),
          );
        },
      ),
    );
  }
}

核心逻辑说明 #

• 通过StreamBuilder实时监听FireStore数据，商品更新时Tab页内容自动同步
• 开启isScrollable: true，确保分类较多时TabBar可横向滚动
• 用分组方法快速匹配Tab与对应分类的商品列表
• 处理了加载、空数据状态，提升基础用户体验

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