A beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it.

Preview PageView

iconSize - the item icon's size

- the item icon's size items - navigation items, required more than one item and less than six

- navigation items, required more than one item and less than six selectedIndex - the current item index. Use this to change the selected item. Default to zero

- the current item index. Use this to change the selected item. Default to zero onItemSelected - required to listen when a item is tapped it provide the selected item's index

- required to listen when a item is tapped it provide the selected item's index backgroundColor - the navigation bar's background color

- the navigation bar's background color showElevation - if false the appBar's elevation will be removed

- if false the appBar's elevation will be removed mainAxisAlignment - use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the items

- use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the items curve - param to customize the item change's animation

- param to customize the item change's animation containerHeight - changes the Navigation Bar's height

icon - the icon of this item

- the icon of this item title - the text that will appear next to the icon when this item is selected

- the text that will appear next to the icon when this item is selected activeColor - the active item's background and text color

- the active item's background and text color inactiveColor - the inactive item's icon color

- the inactive item's icon color textAlign - property to change the alignment of the item title

Getting Started #

Add the dependency in pubspec.yaml :

dependencies: ... bottom_navy_bar: ^5.5.0

Basic Usage #

Adding the widget

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 ), ], )

Use with PageView and PageController #