FancyBottomNavigationPlus

Fancy Gif

Getting Started

Add the plugin (pub coming soon):

dependencies:
  ...
  fancy_bottom_navigation_plus: ^1.0.3

Limitations

For now this is limited to more than 1 tab, and less than 6. So 2-5 tabs.

Basic Usage

Adding the widget

bottomNavigationBar: FancyBottomNavigation(
    tabs: [
            TabData(icon: const Icon(Icons.home), title: "Home"),
            TabData(icon: const Icon(Icons.history), title: "History"),
            TabData(icon: const Icon(Icons.search), title: "Search"),
            TabData(icon: const Icon(Icons.phone), title: "Phone"),
            TabData(icon: const Icon(Icons.settings), title: "Settings"),
    ],
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

TabData

icon -> Widget to be used for the tab
title -> String to be used for the tab
onClick -> Optional function to be used when the circle itself is clicked, on an active tab

optional

initialSelection -> Defaults to 0
circleColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
barheight -> Default to 60
circleRadius -> Default to 60
shadowRadius -> Default to 10
circleOutline -> Default to 10
titleStyle -> Default value already given
key -> Defaults to null

Theming

The bar will attempt to use your current theme out of the box, however you may want to theme it.

Showcase

Using this package in a live app, let me know and I'll add you app here.

Inspiration

This package was inspired by a previous version

fancy_bottom_navigation(https://pub.dev/packages/fancy_bottom_navigation)

Raise issues

Kindly try the package and let me know for improvement and bug fixes.

Contributing

Contributions are welcome, please submit a PR :)