A clean and simple bottom navigation bar with smooth animation and Floating Action Button (FAB) added to the mix.
Check out the source code of the package in the /lib folder.
dependencies:
...
clean_bottom_navigation_bar: ^1.0.0
import 'package:clean_bottom_navigation_bar/clean_bottom_navigation_bar.dart';
bottomNavigationBar: CleanNavigationBar(
showFab: true,
barHeight: 60,
fabHeight: -30,
currentIndex: _currentIndex,
activeColor: Theme.of(context).primaryColor,
inactiveColor: Theme.of(context).cardColor,
indicatorColor: Theme.of(context).indicatorColor,
titleStyle: Theme.of(context)
.textTheme
.caption
.merge(TextStyle(color: Theme.of(context).cardColor)),
onTap: onTabTapped,
items: [
CleanNavigationBarItem(title: Text('Home'), icon: Icons.home),
CleanNavigationBarItem(title: Text('Search'), icon: Icons.search),
CleanNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
CleanNavigationBarItem(
title: Text('Orders'), icon: Icons.shopping_cart),
CleanNavigationBarItem(
title: Text('Settings'), icon: Icons.person_outline),
],
),
For more information, please refer to the example folder.
The following variables have been set to allow configuration:
showFab - (bool) To show/hide Floating Action Button (FAB)
fab - (int) Set which index/tab should the FAB be shown
cornerRadius - (double) Set radius to add curves to the corner of the bottom navigation bar
barHeight - (double) Specify the bar height of the navigation bar
fabHeight - (double) Specify the offset of the FAB to keep inline with the navigation bar
indicatorHeight - (double) Set the height for indicator of active tab that is zooming left and right
activeColor - (Color) The primary colour for all icons and FAB
tabColor - (Color) The background colour of the navigation bar for all tabs
indicatorColor - (Color) The color of the indicator that is moving left and right
titleStyle - (TextStyle) To specify font, size and color of the text below icons
This package was developed with reference to Pedromassango's Titled Navigation bar.