Clean Bottom Navigation Bar

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.

Preview (default mode)

Getting Started

Add the plugin:

dependencies:
  ...
  clean_bottom_navigation_bar: ^1.0.0

Import the package

import 'package:clean_bottom_navigation_bar/clean_bottom_navigation_bar.dart';

Implementation

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.

Customization

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

Thank you

This package was developed with reference to Pedromassango's Titled Navigation bar.