如何在Flutter中编码时在BottomNavigationBar中显示3个以上的项目

Question

我尝试添加5 BottomNavigationBarItem，但是，如果我尝试添加3个以上的项目，则编译器将引发错误。看起来像这样：

 The following RangeError was thrown building BottomNavigationBar(dirty, state:
_BottomNavigationBarState#a56dd(tickers: tracking 3 tickers)):
 RangeError (index): Invalid value: Not in range 0..2, inclusive: 3

我需要在BottomNavigationBar中显示5个项目。帮我解决这个问题。

BottomNavigationBar丢失

有指向代码的链接，当前那里只有三个项目，我想再添加两个项目，而编译器不会抛出错误消息

Answer 1

这是因为默认的 NavigatioBar 不支持超过 3 个项目，使用这个： type: BottomNavigationBarType.fixed

或复制并粘贴下面的代码

    bottomNavigationBar: BottomNavigationBar(
     type: BottomNavigationBarType.fixed,
     backgroundColor: Theme.Colors.primaryDarkColor,
    currentIndex: 1,
     items: [
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up,), title: Text("GLO", 
    style: TextStyle(color: Colors.black),),),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title: 
    Text("MTN"),),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title: 
    Text("Airtel"),),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_drop_up), title: 
    Text("Airtel"),),
     ],
  ),

Answer 2

只需编写它以供将来查询有关此问题的信息。

只需在BottomNavigationBar构造函数中添加一个额外的参数-

type : BottomNavigationBarType.fixed

另请参阅Flutter官方参考。

可选：从开始重新启动应用程序以解决渲染问题。