Important
This is a fork of FancyBottomNavigation to support Flutter 3.0
FancyBottomNavigation
Getting Started
Add the plugin (pub coming soon):
dependencies:
...
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 :)