Blog

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.

Introduction

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.

Flutter 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.

Installation

In your pubspec.yaml add bmnav as a dependency:

dependencies:
  bmnav: ^0.3.4

Then import it:

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

Then you implement it in the Scaffold widget:

@override
Widget build(BuildContext ctx) {
    return Scaffold(
        appBar: AppBar(title: Text('Bottom Nav Demo')),
        body: Container(child: Text('Hello World')),
        bottomNavigationBar: bmnav.BottomNav(
            items: [
                bmnav.BottomNavItem(Icons.home),
                bmnav.BottomNavItem(Icons.fitness_center),
                bmnav.BottomNavItem(Icons.person),
                bmnav.BottomNavItem(Icons.view_headline)
            ],
        ),
    );
}

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.

Flutter flipboxbar

Here's a sample usage:

 // In Scaffold
  bottomNavigationBar: FlipBoxBar(
          items: [
            FlipBarItem(icon: Icon(Icons.map), text: Text("Map"), frontColor: Colors.blue, 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: Colors.orange, 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: Colors.pink, backColor: Colors.pinkAccent),
          ],
          onIndexChanged: (newIndex) {
            print(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(
    tabSize,
    (index) => BottomBarTab(
          initPage: Page(index.toString()),
          tabIconBuilder: (_) => Icon(Icons.add),
          tabTitleBuilder: (_) => Text("Tab ${index.toString()}"),
        ),
  );
  @override
  Widget build(BuildContext context) => MultiNavigatorBottomBar(
        initTabIndex: 0,
        pageWidgetDecorator: pageDecorator,
        tabs: tabs,
      );
  Widget pageDecorator(pageWidget) => Column(
        children: <Widget>[
          Expanded(child: pageWidget),
          Container(
            alignment: AlignmentDirectional.center,
            height: 48.0,
            color: Colors.black,
            child: Text(
              "PageWidgetDecorator",
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      );
}

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

dependencies:
  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