如何在Flutter中结合Firebase数据库用三元条件跳转两类页面

核心思路 #

先从Firebase数据库判断当前用户是商家（seller）还是客户（customer），再根据身份加载对应的页面数组，同时同步切换底部导航栏的选项。

步骤1：分离商家与客户的页面数组 #

分别定义两组页面，对应不同身份的功能页面：

// 客户专属页面
final customerPages = [
  const HomepageCustomer(),
  const Favoritepage(),
  const Cartpage(),
  const Profielpage(),
];

// 商家专属页面（需自行创建对应组件）
final sellerPages = [
  const HomepageSeller(),
  const SellerOrdersPage(),
  const SellerProductsPage(),
  const Profielpage(),
];

步骤2：获取并判断用户身份 #

在页面初始化时，通过Firebase Auth获取当前用户ID，再去对应的集合中验证身份：

String? userRole; // 存储用户身份：'seller'或'customer'

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

Future<void> _getUserRole() async {
  final userId = FirebaseAuth.instance.currentUser?.uid;
  if (userId == null) return;

  // 先检查是否为商家
  final sellerSnapshot = await FirebaseFirestore.instance
      .collection('Users')
      .doc('seller')
      .collection('seller')
      .doc(userId)
      .get();
  
  if (sellerSnapshot.exists) {
    setState(() => userRole = 'seller');
    return;
  }

  // 再检查是否为客户
  final customerSnapshot = await FirebaseFirestore.instance
      .collection('Users')
      .doc('customer')
      .collection('customer')
      .doc(userId)
      .get();
  
  if (customerSnapshot.exists) {
    setState(() => userRole = 'customer');
  }
}

步骤3：根据身份渲染页面与导航栏 #

在build方法中，通过三元判断切换页面数组，同时适配底部导航栏的选项：

@override
Widget build(BuildContext context) {
  // 身份未获取时显示加载动画
  if (userRole == null) {
    return const Center(child: CircularProgressIndicator());
  }

  return SafeArea(
    child: Scaffold(
      // 根据身份加载对应页面
      body: userRole == 'customer' 
          ? customerPages[pageIndex] 
          : sellerPages[pageIndex],
      // 适配不同身份的底部导航
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: pageIndex,
        onTap: (index) => setState(() => pageIndex = index),
        items: userRole == 'customer'
            ? const [
                BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
                BottomNavigationBarItem(icon: Icon(Icons.favorite), label: '收藏'),
                BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '购物车'),
                BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
              ]
            : const [
                BottomNavigationBarItem(icon: Icon(Icons.home), label: '商家首页'),
                BottomNavigationBarItem(icon: Icon(Icons.list_alt), label: '订单管理'),
                BottomNavigationBarItem(icon: Icon(Icons.add_box), label: '商品管理'),
                BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
              ],
      ),
    ),
  );
}

注意事项 #

• 确保已正确集成Firebase Auth与Firestore依赖，并完成初始化配置
• HomepageSeller、SellerOrdersPage等商家页面需自行实现
• 可优化：用户登录时将角色存入本地存储（如SharedPreferences），避免每次启动都查询数据库
• 补充未登录状态处理：若userId为空，可跳转至登录页面

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