Flutter动态Persistent Bottom Nav：根据Firebase登录状态隐藏导航项

核心思路 #

通过动态生成导航项列表，结合Firebase Auth的状态监听，根据用户登录状态（User?对象是否为null）决定是否保留目标导航项，同时同步调整对应的页面列表，确保导航项和页面一一对应。

具体代码实现 #

1. 编写动态生成导航项的方法

List<PersistentBottomNavBarItem> _buildNavItems(User? currentUser) {
  // 基础导航项（所有状态下都显示）
  final navItems = <PersistentBottomNavBarItem>[
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.home_outlined),
      title: "首页",
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.settings_outlined),
      title: "设置",
    ),
  ];

  // 仅当用户已登录时，添加需要隐藏的导航项（比如"个人中心"）
  if (currentUser != null) {
    navItems.insert(1, PersistentBottomNavBarItem(
      icon: const Icon(Icons.person_outlined),
      title: "个人中心",
    ));
  }

  return navItems;
}

2. 同步生成对应页面列表
   导航项和页面的顺序必须严格匹配，避免点击跳转错位：

List<Widget> _buildScreens(User? currentUser) {
  final screens = <Widget>[
    const HomeScreen(),
    const SettingsScreen(),
  ];

  if (currentUser != null) {
    screens.insert(1, const ProfileScreen());
  }

  return screens;
}

3. 用状态监听包裹底部导航栏
   直接调用FirebaseAuth.instance.currentUser可能存在初始化延迟问题，推荐用authStateChanges()监听状态变化，确保导航栏实时响应登录/登出操作：

@override
Widget build(BuildContext context) {
  return StreamBuilder<User?>(
    stream: FirebaseAuth.instance.authStateChanges(),
    builder: (context, snapshot) {
      final currentUser = snapshot.data;
      return PersistentTabView(
        context,
        items: _buildNavItems(currentUser),
        screens: _buildScreens(currentUser),
        // 自定义导航栏配置（样式、控制器等）
        controller: _tabController,
        navBarStyle: NavBarStyle.style1,
      );
    },
  );
}

注意事项 #

• 不要在initState中直接获取currentUser赋值，APP冷启动时auth状态可能未完成初始化，会导致导航项显示异常。
• 如果需要处理auth初始化的加载状态，可以在StreamBuilder中判断snapshot.connectionState，添加加载占位符。

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