BottomNavyBar

一个漂亮且动画化的底部导航。导航栏使用您当前的主题，但您可以自由定制。

修复

支持setState更改BottomNavyBar的_selectindex，只需将bottom_navy_bar.dart复制到您的项目中

BottomNavyBar

PageView

fix

入门

添加插件

dependencies:
  ...
  bottom_navy_bar: ^3.0.0

基本用法

添加小部件

bottomNavigationBar: BottomNavyBar(
   selectedIndex: _selectedIndex,
   showElevation: true, // use this to remove appBar's elevation
   onItemSelected: (index) => setState(() {
              _selectedIndex = index;
              _pageController.animateToPage(index,
                  duration: Duration(milliseconds: 300), curve: Curves.ease);
    }),
   items: [
     BottomNavyBarItem(
       icon: Icon(Icons.apps),
       title: Text('Home'),
       activeColor: Colors.red,
     ),
     BottomNavyBarItem(
         icon: Icon(Icons.people),
         title: Text('Users'),
         activeColor: Colors.purpleAccent
     ),
     BottomNavyBarItem(
         icon: Icon(Icons.message),
         title: Text('Messages'),
         activeColor: Colors.pink
     ),
     BottomNavyBarItem(
         icon: Icon(Icons.settings),
         title: Text('Settings'),
         activeColor: Colors.blue
     ),
   ],
)

自定义（可选）

BottomNavyBar

iconSize - 项目图标的大小

items - 导航项，需要包含一个以上的项目且少于六个

currentIndex - 当前选中的项目索引。用于更改选中的项目。默认为零

onItemSelected - 需要监听项目被点击时，它会提供选中的项目索引

backgroundColor - 导航栏的背景颜色
showElevation - 如果为false，则会移除AppBar的阴影

BottomNavyBarItem

activeColor - 活动项目的背景和文本颜色

inactiveColor - 非活动项目的图标颜色

GitHub

https://github.com/pedromassango/bottom_navy_bar