custom_bottom_navigation 0.0.1 custom_bottom_navigation: ^0.0.1 copied to clipboard
A Custom bottom navigation bar with box animation.
A custom bottom navigation bar with box animation. This is inspired from some of the erlier designs, but in a more simplified and yet exiting way.
Demo #
Usage #
To use the package, first, add the custom_bottom_navigation as the dependency in your pubspec.yaml file.
Then, add the CustomBottomBoxBar()
in the bottomNavigationBar:
field of Scaffold. You need to provide two fields, items
(List of CustomBottomBaxBarItem) and onIndexChange
method. See the example below.
Scaffold(
bottomNavigationBar: CustomBottomBoxBar(
inicialIndex: selectedPageIndex,
onIndexChange: (int insex) {
setState(() {
selectedPageIndex = val;
});
},
items: [
CustomBottomBoxBarItem(
Icons.home_filled,
Text('Home')),
CustomBottomBoxBarItem(
Icons.person,
Text('Profile')),
],
),
);
Properties #
You can custemize most of the properties like:
Navigation bar Height #
you can provide the height of navigation bar by height
parameter.
selected Item Box Color #
you can provide the Color of selected item box by selectedItemBoxColor
parameter.
unselected Item Box Color #
you can provide the Color of unselected item box by unselectedItemBoxColor
parameter.
selected Item Color #
you can provide the Color of selected item by selectedItemColor
parameter.
unselected Item Color #
you can provide the Color of selected item by unselectedItemColor
parameter.
Animation Duration #
you can provide the animation duration by duration
parameter.
Inicial Index #
you can provide the incial index by inicialIndex
parameter.