Tutorial 3 - Flutter Bottom Navigation Bar implementation using bottom_navy_bar Library

Learning flutter development is fun, with this awesome platform we can make any kind of flutter app. In this tutorial we will make bottom navigation bar using another library named as bottom_navy_bar: any . In previous tutorial we had done same with ff_navigation_bar: any. After reading previous articles now we have a good understand about the working and behaviour of bottom navigation bar.

In this flutter tutorial we will start direct implementation for this library. If you want to understand the basics of flutter bottom navigation bar you can read tutorial 1 in this series.

Implementation

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

dependencies:
  bottom_navy_bar: any

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

BottomNavyBar()
BottomNavyBarItem()

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

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 tap 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