Flutter应用中侧边菜单与底部导航栏共存报错的解决方法

错误的核心是同一个_pageIndex变量同时控制页面切换和底部导航栏的选中状态：

• 底部导航栏的items只有5个，有效索引范围是0-4
• 侧边菜单的菜单项将_pageIndex设为5、6，此时底部导航栏的currentIndex超出有效范围，触发断言失败

我们需要将页面索引和底部导航栏选中索引分开管理，同时在非底部导航页面时隐藏底部导航栏，避免无效索引问题。

步骤1：拆分状态变量 #

新增专门管理底部导航选中状态的变量，避免和页面索引冲突：

int _pageIndex = 0;
int _bottomNavIndex = 0; // 仅用于底部导航栏的选中状态

步骤2：修改导航点击事件 #

• 底部导航栏的点击事件同步更新两个索引：

void onBottomNavTapped(int index) {
  setState(() {
    _pageIndex = index;
    _bottomNavIndex = index;
  });
}

• 侧边菜单的点击事件仅更新页面索引，无需同步底部导航：

// Add Company 菜单项
ListTile(
  title: const Text('Add Company'),
  selected: _pageIndex == 5,
  onTap: () {
    setState(() {
      _pageIndex = 5;
    });
    Navigator.pop(context);
  },
),
// Add User 菜单项
ListTile(
  title: const Text('Add User'),
  selected: _pageIndex == 6,
  onTap: () {
    setState(() {
      _pageIndex = 6;
    });
    Navigator.pop(context);
  },
),

• 移除Log Out菜单项的无效selected判断（_pageIndex ==7超出页面列表范围）：

ListTile(
  title: const Text('Log Out'),
  onTap: () {
    signOut();
    Navigator.pop(context);
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => const LoginScreen()));
  },
),

步骤3：动态控制底部导航栏显示 #

仅在页面属于底部导航范围（0-4）时显示底部导航栏，否则隐藏：

bottomNavigationBar: _pageIndex >= 0 && _pageIndex <=4 ? BottomNavigationBar(
  backgroundColor: Colors.blueAccent,
  selectedIconTheme: const IconThemeData(color: Colors.white),
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.black45,
  type: BottomNavigationBarType.fixed,
  currentIndex: _bottomNavIndex, // 使用专门的底部导航索引变量
  onTap: onBottomNavTapped, // 使用修改后的点击事件
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
    BottomNavigationBarItem(
        icon: Icon(Icons.add_business_outlined), label: "Trxn"),
    BottomNavigationBarItem(
        icon: Icon(Icons.calendar_today), label: "Calendar"),
    BottomNavigationBarItem(icon: Icon(Icons.people), label: "User"),
    BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
  ],
) : null,

• 底部导航栏切换页面时，保持正常选中状态
• 点击侧边菜单切换到非底部导航页面时，底部导航栏自动隐藏，避免索引错误
• 两种导航方式互不干扰，状态管理清晰

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