Flutter开发中bottomNavigationBar底部导航栏不显示问题求助

问题原因及解决方案 #

导致BottomNavigationBar无法正常显示的常见原因及对应修复方法如下：

• 未指定BottomNavigationBar的type属性
  当底部导航的item数量≥3时，Flutter默认的type是BottomNavigationBarType.shifting，该模式下你设置的backgroundColor属性不会生效，且item会默认做位移隐藏文字的效果，很容易出现内容不可见的问题，需要手动设置type为BottomNavigationBarType.fixed固定导航样式。
• 选中颜色和背景色冲突
  你代码中使用的Theme.of(context).accentColor在新版Flutter中已经被废弃，替换为Theme.of(context).colorScheme.secondary。如果你的主题secondary色值和紫色背景接近，也会导致选中的图标文字和背景撞色，看起来像没有显示。
• 父页面嵌套了Scaffold
  如果你当前的TabsScreen是放在另一个Scaffold的body属性中，子Scaffold的bottomNavigationBar会被父页面的布局遮挡，只需要保留最外层的Scaffold即可。

修复后的核心代码修改部分 #

bottomNavigationBar: BottomNavigationBar(
  onTap: _selectScreen,
  // 新增type属性
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.purple[300],
  // 替换废弃的accentColor
  selectedItemColor: Theme.of(context).colorScheme.secondary,
  unselectedItemColor: Colors.white,
  currentIndex: _selectedScreenIndex,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: 'الرئيسية',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.campaign_rounded),
      label: 'الاعلانات',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.account_circle),
      label: 'حسابي',
    ),
  ],
)

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