Tutorial 4 - Flutter Bottom Navigation Bar implementation using bubbled_navigation_bar Library

Flutter is expanding day by day. We can see lot of awesome things are happening in flutter app development community. We are learning how to make awesome bottom navigation bars in flutter. This the the 4th tutorial of this series or we can say this the 4th library we are using to make bottom navigation bars.

In this tutorial we will use bubbled_navigation_bar to make beautiful bottom navigation bar and some tabs. Library is very easy to use as the previous libraries. If you landed directly on this article then I suggest to read previous one also, you will have some awesome stuff related to bottom navigation.

Implementation

First of all we need to add dependency, to add functionality of library in flutter app

 bubbled_navigation_bar: any

Main classes we will use to make bottom navigation bar and tabs

Make screens which you want to open on tab tapping. I have create 4 screen as mentioned below-

BubbledNavigationBar()
BubbledNavigationBarItem()

home_tab_screen.dart – Tab 1

class HomeTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.blue,
    );
  }
}

profile_tab_screen.dart – Tab 2

class ProfileTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.green,
    );
  }
}

order_tab_screen.dart – Tab 3

class OrdersTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.red,
    );
  }
}

search_tab_screen.dart – Tab 4

class SearchTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.orange,
    );
  }
}

Now add widgets in a list so that we can call on the basis of index tapped.

List <Widget> _listPages=[HomeTabScreen(),ProfileTabScreen(),OrdersTabScreen(),SearchTabScreen()];

When index 0 will tapp that is Home Tab it will call screenList 0 index that is HomeTab() and so on. The complete implementation code is given below-

import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bottom_navy_bar/tabs/home_tab_screen.dart';
import 'package:flutter_bottom_navy_bar/tabs/orders_tab_screen.dart';
import 'package:flutter_bottom_navy_bar/tabs/profile_tab_screen.dart';
import 'package:flutter_bottom_navy_bar/tabs/search_tab_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;
  List<Widget> _listPages=[HomeTabScreen(),ProfileTabScreen(),OrdersTabScreen(),SearchTabScreen()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _listPages[currentIndex],
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: currentIndex,
        showElevation: true,
        itemCornerRadius: 8,
        curve: Curves.easeInBack,
        onItemSelected: (index) => setState(() {
          currentIndex = index;
        }),
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.apps),
            title: Text('Home'),
            activeColor: Colors.red,
            textAlign: TextAlign.center,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.people),
            title: Text('Users'),
            activeColor: Colors.purpleAccent,
            textAlign: TextAlign.center,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.message),
            title: Text(
              'Messages test for mes teset test test ',
            ),
            activeColor: Colors.pink,
            textAlign: TextAlign.center,
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
            activeColor: Colors.blue,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

For more customisation bottom_navy_bar plugin have some other properties. These can be used as per requirement to enhance the look and feel of your flutter app, have a look

BottomNavyBar

iconSize – the item icon’s size
items – navigation items, required more than one item and less than six
selectedIndex – the current item index. Use this to change the selected item. Default to zero
onItemSelected – required to listen when a item is tapped it provide the selected item’s index
backgroundColor – the navigation bar’s background color
showElevation – if false the appBar’s elevation will be removed
mainAxisAlignment – use this property to change the horizontal alignment of the items. It is mostly used when you have ony two items and you want to center the items
curve – param to customize the item change’s animation
containerHeight – changes the Navigation Bar’s height