FancyBottomNavigationPlus
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 :)