flutter 底部导航栏item悬浮效果实现

        今天拿以前的项目练习上手flutter，刚开始就遇到一个问题，应用底部导航栏要实现一个这样的效果：

底部导航栏按钮悬浮

        但是使用flutter自己的BottomNavigationBar组件发现很难达到预期效果，因为BottomNavigationBar的高度不是固定的，会随着BottomNavigationBarItem中最大的高度而改变。所以需要用到flutter里的另一个组件FloatingActionButton，悬停按钮组件，将FloatingActionButton添加上之后效果是这样的：

2

跟我们需要的效果相差甚远，这个时候去设置floatingActionButtonLocation属性，设置为FloatingActionButtonLocation.centerDocked,这个属性是设置悬停按钮的位置，centerDocked是浮动在底部控件之上，再次运行，效果如下：

3

基本上没有问题，但是跟我想要的布局效果依然不太一样，而且这个悬停按钮卡在中间看起来也很突兀，想让按钮往下再移动一点，但是location属性是特定的类，所以不可能直接在界面代码上加减距离，但是我们完全可以去到这个属性所在的文件，重写一个属性，来供我们使用，改动如下：

4

5

改完之后我们再回到我们设置location的地方，将centerDocked属性改为我们新增加的属性：

6

再来运行一下，效果如下：

7

跟我想要的效果一样。

因为选定按钮是要插到底部导航栏的，所以我们设置底部导航栏的时候要给悬停按钮留出空位来，title和icon的颜色设置为透明即可。