Best Flutter Bottom Navigation Bar Libraries

| Page Views: 842

Best Flutter Bottom Navigation Bar Libraries

In this piece we want to look at some of the best Bottom Navigation Libraries for Flutter. These days bottom navigation is almost as popular as tabs. So let's look at some of the libraries you can use as an alternative to the standard Flutter BottomNavigationBar class.


In the year 2014, a design language codenamed "Quantum Paper" was released by Google. According to designer Matías Duarte, "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." This "Quantum Paper" is the now popular Material Design.

Material Design empowers designers and developers to create intuitive and beautiful products that imitate real physical objects. It is used extensively in mobile as well as web platforms. Guidelines are available to help developers in designing UI interfaces and components.

Bottom Navigation Bar

Among those components is the Bottom Navigation Bar. These allow movement between primary destinations in an app using icon or text tabs aligned in a bar at the bottom of the screen. According to Material Design Bottom Navigation guidelines, Bottom navigation bars should display between three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.

Let's now proceed and look at some of the best bottom navigation libraries for flutter.

(a). bmnav

This is a very flexible Flutter implementation of the Bottom Navigation Bar.


In your pubspec.yaml add bmnav as a dependency:

  bmnav: ^0.3.4

Then import it:

import 'package:bmnav/bmnav.dart' as bmnav;

Then you implement it in the Scaffold widget:

Widget build(BuildContext ctx) {
    return Scaffold(
        appBar: AppBar(title: Text('Bottom Nav Demo')),
        body: Container(child: Text('Hello World')),
        bottomNavigationBar: bmnav.BottomNav(
            items: [

Find the full main.dart here.

No. Location Link
1. GitHub Download
2. GitHub Browse

(b). flip_box_bar

Flip Box Bar is a 3D BottomNavigationBar inspired by Dribbble design by Dannniel.

Flip Box Bar

Here's a sample usage:

 // In Scaffold
  bottomNavigationBar: FlipBoxBar(
          items: [
            FlipBarItem(icon: Icon(, text: Text("Map"), frontColor:, backColor: Colors.blueAccent),
            FlipBarItem(icon: Icon(Icons.add), text: Text("Add"), frontColor: Colors.cyan, backColor: Colors.cyanAccent),
            FlipBarItem(icon: Icon(Icons.chrome_reader_mode), text: Text("Read"), frontColor:, backColor: Colors.orangeAccent),
            FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor: Colors.purple, backColor: Colors.purpleAccent),
            FlipBarItem(icon: Icon(Icons.print), text: Text("Print"), frontColor:, backColor: Colors.pinkAccent),
          onIndexChanged: (newIndex) {

Find the full main.dart file here.

No. Location Link
1. GitHub Download
2. GitHub Browse

(c). multi_navigator_bottom_bar

Multi Navigator Bottom Bar is another bottom navigation bar package. It allows us build multi-navigator bottom navigation bar more easily.

Here's a taste of it:

class _MyHomePageState extends State<MyHomePage> {
  static final tabSize = 4;
  var tabs = List.generate(
    (index) => BottomBarTab(
          initPage: Page(index.toString()),
          tabIconBuilder: (_) => Icon(Icons.add),
          tabTitleBuilder: (_) => Text("Tab ${index.toString()}"),

  Widget build(BuildContext context) => MultiNavigatorBottomBar(
        initTabIndex: 0,
        pageWidgetDecorator: pageDecorator,
        tabs: tabs,

  Widget pageDecorator(pageWidget) => Column(
        children: <Widget>[
          Expanded(child: pageWidget),
            height: 48.0,
            child: Text(
              style: TextStyle(color: Colors.white),

You install by first adding it as a dependency in the pubspec.yaml file:

  multi_navigator_bottom_bar: ^0.0.7

Then you download it via the following command:

  $ flutter packages get

Download the project below

No. Location Link
1. GitHub Download
2. GitHub Browse

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.


What do You Think

Previous Post Next Post