fancy_bottom_navigation 0.2.0

An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customisable..

FancyBottomNavigation

Getting Started

Add the plugin (pub coming soon):

dependencies:
  ...
  fancy_bottom_navigation: ^0.2.0

Limitations

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

Basic Usage

Adding the widget

bottomNavigationBar: FancyBottomNavigation(
    tabs: [
        TabData(iconData: Icons.home, title: "Home"),
        TabData(iconData: Icons.search, title: "Search"),
        TabData(iconData: Icons.shopping_cart, title: "Basket")
    ],
    routeObserver: routeObserver,
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

Creating a route observer

final RouteObserver<PageRoute> routeObserver = new RouteObserver<PageRoute>();

...

return MaterialApp(
      ...
      navigatorObservers: [routeObserver],
    );

See the example app for full implementation.

Attributes

required

tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position routeObserver -> RouteObserver needed to remove Overlay when navigating away.

optional

initialSelection -> Defaults to 0
circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
taxtColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
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. Here are the attributes:

Programmatic Selection

To select a tab programmatically you will need to assign a GlobalKey to the widget. When you want to change tabs you will need to access the State using this key, and then call setPage(position).
See example project, main.dart, line 75 for an example.

Inspiration

This package was inspired by a design on dribbble by Manoj Rajput:
https://dribbble.com/shots/5419022-Tab

Contributing

Contributions are welcome, please submit a PR :)