×
×

Spread the love

In this tutorial, we will learn how to use the bottom navigation bar in flutter. We will also see an example where we customize it’s style using different properties.

Flutter Bottom Navigation Bar Widget

Bottom navigation bar is a material widget in flutter that is displayed at the bottom of the screen. The bottom navigation bar is used to display a row of items & the items should be more than two. The standard number of items to use inside a bottom navigation bar fall between three and five. Every item must have a label and an icon. When we select an item it will display content corresponding to that item.

The items of the bottom navigation bar should associate with views that contain the important features of the app. Doing that will help the user better understand the functions and features of the app quickly. For devices with larger screens, it is suggested to use navigation drawer instead.

Note : The length of items must be at least two and each item’s icon and title/label must not be null.

How To Create Bottom Navigation Bar In Flutter ?

We can create a bottom navigation bar in flutter by calling its constructor and providing required properties. The bottom navigation bar has one required property items. This property is used to add items to the bottom navigation bar. Each item will be a BottomNavigationBarItem widget.

Bottom Navigation Bar Constructor :

BottomNavigationBar(
    {Key? key,
    required List<BottomNavigationBarItem> items,
    ValueChanged<int>? onTap,
    int currentIndex,
    double? elevation,
    BottomNavigationBarType? type,
    Color? fixedColor,
    Color? backgroundColor,
    double iconSize,
    Color? selectedItemColor,
    Color? unselectedItemColor,
    IconThemeData? selectedIconTheme,
    IconThemeData? unselectedIconTheme,
    double selectedFontSize,
    double unselectedFontSize,
    TextStyle? selectedLabelStyle,
    TextStyle? unselectedLabelStyle,
    bool? showSelectedLabels,
    bool? showUnselectedLabels,
    MouseCursor? mouseCursor,
    bool? enableFeedback}
) 

Bottom navigation bar has one required property, items. Items is a List which accepts widgets of type BottomNavigationBarItem. This widget is used to create our item that will be displayed on the Bottom Navigation Bar.

Basic implementation of bottom navigation bar

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ]
    );

To display a bottom navigation bar we have to provide BottomNavigationBar widget to scaffold’s bottomNavigationBar property.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter Learning"),
      ),
      body:Container(),
      bottomNavigationBar: BottomNavigationBar(),
    );

Flutter Bottom Navigation Bar Properties

The most commonly used properties of bottom navigation bar are:

  • onTap
  • currentIndex
  • elevation
  • type
  • backgroundColor
  • iconSize
  • selecteddItemColor
  • unselectedItemColor
  • selectedFontSize
  • unselectedFontSize
  • showSelectedLabels
  • showUnselectedLabels

onTap

The ontap property returns a value of type integer which is the index of the item the user tapped on. Based on this index we will update the screen content.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      onTap: _onTap,
    );
// _onTap function
void _onTap(int index)
  {
    _selectedIndex = index;
    setState(() {

    });
  }

currentIndex

We will use currentIndex property to update the current item and its content. whenever the user taps on an item we have to update this property with the index of the item tapped by the user. so we will update the index with the id received in the onTap function above. In the below code _selectedIndex is a global variable.

// Global variable int _selectedIndex = 0;
BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      onTap: _onTap,
    );

// _onTap function
void _onTap(int index)
  {
    _selectedIndex = index;
    setState(() {

    });
  }

elevation

Elevation makes the Bottom navigation bar display on top of the screen contents. If we want to increase or decrease elevation we can do it by using elevation property.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      unselectedItemColor: Colors.grey,
      onTap: _onTap,
      elevation: 15,
    );

Output :

flutter bottom navigation bar elevation

type

The bottom navigation bar is of two types fixed and shifting. If we don’t specify the type it will change based on the number of items we use for it. When there are less than four items it will automatically set to fixed. If the items are greater than four it will set to shifting.

fixed :

It will display both label and icon and there will be no change in size of icon and label text even when we select the item.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      unselectedItemColor: Colors.grey,
      backgroundColor: Colors.white,
      onTap: _onTap,
      type: BottomNavigationBarType.fixed,
    );

Output :

flutter bottom navigation bar type fixed

shifting :

When the bottom navigation bar type is shifting only icons will appear for unselected items. The selected item displays both icon and label.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      unselectedItemColor: Colors.grey,
      backgroundColor: Colors.white,
      onTap: _onTap,
      type: BottomNavigationBarType.shifting,
    );

Output :

bottom navigation bar type shifting

backgroundColor

We will use this property to change the background color of the bottom navigation bar. By default the background color is light grey.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.white,
      backgroundColor: Colors.deepOrange,
      onTap: _onTap,
    );

Output :

bottom navigation bar background color

iconSize

If we want to change the size of the icon then we have to use iconSize property.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.grey,
      iconSize: 30,
      onTap: _onTap,
    );

Output :

bottom navigation bar icon size

selectedItemColor

This property will change the color of both icon and label text of the selected item.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.grey,
      iconSize: 30,
      onTap: _onTap,
    );

Output :

flutter bottom navigation bar selected item color

unselectedItemColor

This property will change the color of both icon and label text of the unselected items.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.green,
      iconSize: 30,
      onTap: _onTap,
    );

Output :

flutter bottom navigation bar unselecetd item color

selectedFontSize

To change the font size of the selected item we have to use selectFontSize property.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.grey,
      selectedFontSize: 20,
      onTap: _onTap,
    );

Output :

bottom navigation bar selected font size

unselectedFontsize

To change the font size of the unselected item we have to use unselectFontSize property.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.grey,
      unselectedFontSize: 20,
      onTap: _onTap,
    );

Output :

bottom navigation bar unselected font size

showSelectedLabels

It is a boolean value that we will use to show or hide label of selected item. If we set it to true it will show the label for selected item and hides the label if set to false.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.grey,
      showSelectedLabels: false,
      onTap: _onTap,
    );

Output :

flutter bottom navigation bar show selected labels false

showUnselectedLabels

It is a boolean value that we will use to show or hide label of unselected items. If we set it to true it will show the label for unselected items and hides the labels if set to false.

BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.grey,
      showUnselectedLabels: false,
      onTap: _onTap,
    );

Output :

flutter bottom navigation bar show unselected labels false

Flutter Bottom Navigation Bar Example

Let’s create an example where we display a bottom navigation bar with three items. Whenever the user taps on an item we will display data according to the item in the center of the screen. For this purpose we will need a global variable _selectedindex to hold the index of the tapped item. We will update selected item and its data based on this index.

By default we will display the first item as selected.

int _selectedIndex = 0;

Now let’s declare a List _items which will hold our widgets that will appear based on item selected.

List<Widget> _items = [
    Text(
    'Index 0: Home',
    ),
    Text(
      'Index 1: Profile',
    ),
    Text(
      'Index 2: Shop',
    ),
  ];

We will also need a function to get the index of the item we select so that we can update the global variable _selectedIndex with that index.

void _onTap(int index)
  {
    _selectedIndex = index;
    setState(() {

    });
  }

Let’s update the content of the screen based on index.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter Learning"),
      ),
      body:Center(
        child: _items.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: _showBottomNav(),
    );

You cannot save the state of the pages by using above code. For example, if you are searching for something in a page and switched the page and returned to same page the search query will be lost. You have to type your query again. To save the state of a page use IndexedStack Instead.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter Learning"),
      ),
      body:Center(
        child: IndexedStack(
          index: _selectedIndex,
          children: _items
        ),
      ),
      bottomNavigationBar: _showBottomNav(),
    );

Now we will create a function _showBottomNav() which will return a BottomNavigationBar widget to scaffold’s bottomNavgationBar property.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter Learning"),
      ),
      bottomNavigationBar: _showBottomNav(),
    );
Widget _showBottomNav()
  {
    return BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.deepOrange,
      unselectedItemColor: Colors.grey,
      onTap: _onTap,
    );
  }

Complete Code :

Let’s sum up the entire functionality to create a bottom navigation bar completely

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'widgets/add_entry_dialog.dart';
void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  //List<String> _titles = ["Home", "Profile", "Shop"];
  List<Widget> _items = [
    Text(
    'Index 0: Home',
    ),
    Text(
      'Index 1: Profile',
    ),
    Text(
      'Index 2: Shop',
    ),
  ];
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Learning"),
      ),
      body:Center(
        child: IndexedStack(
          index: _selectedIndex,
          children: _items
        )//_items.elementAt(_index),
      ),
      bottomNavigationBar: _showBottomNav(),
    );
  }

  Widget _showBottomNav()
  {
    return BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: 'Shop',
          ),
        ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.grey,
      onTap: _onTap,
    );
  }

  void _onTap(int index)
  {
    _selectedIndex = index;
    setState(() {

    });
  }
}

Output :

flutter bottom navigation bar example output

I hope you understand this tutorial about how to create and display or show bottom navigation bar in flutter. We have also seen an example where we’ve used BottomNavigationBar widget and customized it’s style. Let’s catch up with some other widget in the next post. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference : Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *