kharleb50 / custom_bottom_navigation Goto Github PK

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way.

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 index) {
          setState(() {
            selectedPageIndex = index;
          });
        },
        items: [
          CustomBottomBoxBarItem(
              Icons.home_filled,
              Text('Home')),
          CustomBottomBoxBarItem(
              Icons.person,
              Text('Profile')),
        ],
      ),
    );

You can custemize most of the properties like:

you can provide the height of navigation bar by height parameter.

you can provide the Color of selected item box by selectedItemBoxColor parameter.

you can provide the Color of unselected item box by unselectedItemBoxColor parameter.

you can provide the Color of selected item by selectedItemColor parameter.

you can provide the Color of selected item by unselectedItemColor parameter.

you can provide the animation duration by duration parameter.

you can provide the incial index by inicialIndex parameter.