Bottom Navigation Bar in Flutter. How to make Bottom Navigation Bar in Flutter?

Bottom Navigation Bar in Flutter. 

Introduction

Bottom navigation bar are one of the most important part of modern apps and so in Flutter right out of the box we have got a widget that is named similarly as BottomNavigationBar.

Bottom Navigation Bar

Table of Contents

• Setup project
• Logic code
• Design
• Result
• Other parameters

Setup project

In order to make a bottom navigation bar we need no dependency to be install.

So start by just creating a new project or use the existing project you are working on. To create a new project use Android Studio, Visual Studio Code or just by Command Prompt / Terminal.

flutter create bottom_nav_bar

Logic Code

In this app we will make an app with three options on bottom navigation bar - 

 Home, Account, Dashboard.

When clicked on any option, the body of Scaffold will contain a Text widget showing one of the three options.

Now we have to use the field already present in Scaffold of our app. Flutter by default creates a demo project, so clean the MyHomePage stateful widget just for simplicity.

Instead of that create a new stateful widget and name it HomePage.

Let's come to build method.

In the build method we will return a Scaffold widget.

For our app we will use three fields of Scaffold, that are 

1. appBar
2. body
3. bottomNavigationBar

Now we are already familiar with appBar and body so we we will focus on bottomNavigationBar. But before that initialize two variables as follows. We will require it.

int _selectedIndex = 0;
List<String> options = ["Home", "Account", "Dashboard"];

In the Scaffold enter the field bottomNavigationBar.

Scaffold(      
  bottomNavigationBar: ,
  appBar: AppBar(),
  body: Container(),  
);

In the bottomNavigationBar we can provide many parameters but the one we are going to use in our app is BottomNavigationBar(Note: here b is capital).

BottomNavigationBar requires a field and that is items:[].

items is a list of widget. But here the only widget that you can use is BottomNavigationBarItem. In our app we will require 3 BottomNavigationBarItem.

So our code should look like

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: icon),
    BottomNavigationBarItem(icon: icon),
    BottomNavigationBarItem(icon: icon),
  ],
),

The icon here is required field. We have large variety of icons in Flutter. According to our app we have Home,  Account. Dashboard. So we do not require to get icons from other place.

Also there is another required field for label which takes String parameter. So provide the respective labels here.

Now we have complete code for design.

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home),label: "Home",),
    BottomNavigationBarItem(icon: Icon(Icons.account_circle),label: "Account",),
    BottomNavigationBarItem(icon: Icon(Icons.dashboard),label: "Dashboard",),
  ],
),

But wait our app won't work because the bottomNavigationBar has no functionality. To do that there are some fields, that are

currentIndex: ,
selectedItemColor: ,
onTap: ,

 

Let's discuss one by one.

• The currentIndex field specifies which item is being selected and for that we have made _selectedIndex field. The first item has index equals zero and so on.
• selectedItemColor as the name states the color of item which when selected.
• onTap is function which has an argument of index. This is the index of tapped item. We will set the _selectedIndex as index here.

So this part of code should look like,

currentIndex: _selectedIndex,
selectedItemColor: Colors.amber,
onTap: (int index) {
  setState(() {
    _selectedIndex = index;
  });
},

Congrats we completed our logic code for our app and now run it.

Design

In the body section we are going to use a Text widget wrapped by Center widget and also apply some text styles. So copy the following code.

Center(
  child: Text(
    options[_selectedIndex],
    style: TextStyle(
      fontSize: 48,
      fontWeight: FontWeight.w700,
    ),
  ),
),

Result

This is our final app.

Other paramters

But some fields are not discussed yet. Let's discuss now

1. elevation : This field places the bottom navigation bar in z index. It means it is the amount of shadow. It accepts double value and its default value is equal to 8.0. You can compare from following two examples.

   

   elevation : 0

   
   
   

   

   elevation : 20

   
   
2. type: This asks for type of bottom navigation bar and accepts value BottomNavigationBarType. There are two types:-

   

   type: BottomNavigationBarType.shifting,
   

   
   

   

   type: BottomNavigationBarType.fixed,
   

   
   
3. fixedColor: This field asks for which Color you want to assign for selectected item. According to documentation of Flutter of this class selectedItemColor is preferred. 
4. backgroundColor: In this field we set the color of BottomNavigationBar.

   

   backgroundColor: Colors.green,
   

   
   
5. iconSize: This field sets the size of icon. The input is of double type. It's default value is 24.0.
6. unSelectedItemColor: Contrary to selectedItemColor, sets color of unselected item.

   

   unselectedItemColor: Colors.deepOrangeAccent,
   

   
   
7. selectedIconTheme: Sets the icon theme for selected item. It takes IconThemeData type value.

   

   selectedIconTheme: IconThemeData(

   color: Colors.blue, 

   size: 32.0,

   opacity: 0.5,),
   

   
   
8. unselectedIconTheme: Sets the icon theme for unselected item. It takes IconThemeData type value.
   

   selectedIconTheme: IconThemeData(color: Colors.blue, size: 32.0, opacity: 1),
   unselectedIconTheme: IconThemeData(color: Colors.orange, size: 12.0, opacity: 0.4),
   

   
   
9. selectedFontSize: Sets the font size of label for selected item.
10. unselectedFontSize: Sets the font size of label for unselected item
11. selectedLabelStyle: Sets the label style for selected item. It takes input of TextStyle type. 
12. unselectedLabelStyle: Sets the label style for unselected item. It takes input of TextStyle type. 
13. showSelectedLabels: Sets if you want to show/hide the selected item label. It takes value of boolean type.
14. showUnselectedLabels: Sets if you want to show/hide the unselected item label. It takes value of boolean type.
15. enableFeedback: It takes boolean type of input. It is for whether you want a haptic feedback on press of item. For e.g. on Android device on tap will produce click sound and long press will make short vibration.

So we have learned how to make a Bottom Navigation Bar in Flutter. See you in next blog.

Thank you.