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

问题描述 投票:2回答:3

我尝试添加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 missing

有代码的链接,目前只有三个项目,我想添加两个项目,而不会编译器抛出错误消息

dart material-design flutter
3个回答
3
投票

只需将其写入有关此问题的未来查询。

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

type : BottomNavigationBarType.fixed

Check also the Flutter Official Ref.

可选:从头开始重新启动应用以修复渲染问题。


0
投票

不要热重新加载,只需重新启动项目


-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"),),
     ],
  ),
© www.soinside.com 2019 - 2024. All rights reserved.