Flutter中遇到的需求解决一[BottomNavigationBar底部菜单中间位置图标覆盖放大]

  • 此文章为了使用flutter自带的BottomNavigationBar空间实现如下图样式的底部菜单。也是因为没有找到能实现此样式的插件,才使用此这个方法。

中间大图标底部菜单实例
实现此效果思路是首先使用正常的BottomNavigationBar控件创建五个菜单。
如下,空色框的内容既是。中间的按钮label设置成空的,将图标使用scale参数设置成非常小的。这样就会被上面的大图标完全覆盖。
在这里插入图片描述
随后再在页面中添加一个在底部中间悬浮的按钮,如下图红框的内容。
在这里插入图片描述
设置了floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,为 悬浮按钮在底部中间。然后在通过floatingActionButton参数来设置按钮的样式,大小自己控制即可。悬浮按钮点击调用上面BottomNavigationBar控件中设置的点击方法,并且传递跳转页面index为2.也就是第三个按钮即可。
此方法是因为没有找到更好的方法来应用这中按钮babbar。如哪位有更好的办法希望能告知。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值