sz_fancy_bottom_navigation 0.1.4 copy "sz_fancy_bottom_navigation: ^0.1.4" to clipboard
sz_fancy_bottom_navigation: ^0.1.4 copied to clipboard

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

FancyBottomNavigation #

This package is based on fancy_bottom_navigation by tunitowen

Fancy Gif

Getting Started #

Add the plugin (pub coming soon):

dependencies:
  ...
  sz_fancy_bottom_navigation: ^0.3.2

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")
    ],
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

TabData #

iconData -> Icon 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

Attributes #

required #

tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

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
textColor -> 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.

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 design on dribbble by Manoj Rajput:
https://dribbble.com/shots/5419022-Tab

Contributing #

Contributions are welcome, please submit a PR :)

3
likes
70
pub points
38%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (LICENSE)

Dependencies

flutter, vector_math

More

Packages that depend on sz_fancy_bottom_navigation