如何自定义底部导航栏项目而不是创建自定义底部导航栏

Question

我有以下底部导航栏代码：

bottomNavigationBar: BottomNavigationBar(
            currentIndex: cubit.currentIndex,
            onTap: (index) {
              cubit.changeBottomNavIndex(index);
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Home), label: 'Home'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Chat), label: 'Chat'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Paper_Upload,), label: 'Post'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Location), label: 'Location'),
              BottomNavigationBarItem(
                  icon: Icon(IconBroken.Setting), label: 'Settings'),
            ],
          ),

这是下图：

所以我想知道是否有一种方法可以只自定义中间的 bottom navigation bar item，而不是创建一个自定义的 Navigation bottom bar 看起来像一个 Floating action button...

还是我要创建一个新的自定义？

我希望有人能帮助我:)...

Answer 1

我找到了一个解决方案，但我认为它不是最好的：

只需添加一个浮动操作按钮，如下代码：

floatingActionButton: FloatingActionButton(
            onPressed: () { },
            tooltip: 'Post',
            child: Icon(IconBroken.Paper_Upload, color: Colors.white,),
            elevation: 2.0,
          ),

并在 Scaffold 部分添加以下行：

floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,

如下图所示：

但我觉得它看起来不太好..

我希望有人给我更好的答案:)

Answer 2

我们有很多关于底部导航栏的定制小部件。您可以使用与您的风格相匹配的 persistent_bottom_nav_bar