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

 

BottomNavyBarItem 

  • icon – the icon of this item
  • title – the text that will appear next to the icon when this item is selected
  • activeColor – the active item’s background and text color
  • inactiveColor – the inactive item’s icon color
  • textAlign – property to change the alignment of the item title
Click here to check library in depth
Sample Code Download
Github Form

Er. Sandeep Singh Sidhu

I am the founder of CallStem Software LLP and Stem Technocrats IT Services, Blood Wallet, Apni Boli, and of course flutterfumes.com.
I am very passionate about technology and learning new things. I believe sharing knowledge is the most powerful way to learn. One who is an active learner is always an active contributor too because whatever you learn, you should implement.

I also love to write poetry, and talking to myself is my favorite all-time activity, no matter it is a program logic, emotional poetry, or a social issue.

Previous Post
Next Post

Leave a Reply

Your email address will not be published.

Hey, wait! If You don't want to miss Flutter Updates!

Please join our Newsletter List and enjoy with daily Flutter Updates