How to make the Bottom Navigation Bar in the Flutter

5 min readNov 25, 2022

Hey, there I hope your journey to learn flutter is going smoothly, and now you are stuck with how you can add the BottomNavigtionBar widget in your application.

Here I am by the end of the post you will be able to create a bottom navigation bar for your application and tweak the look and feel of the bar according to your preference.

What we will cover

What is Bottom Navigation Bar in Flutter?
Adding BottomNavigationBar and BottomNavigationBarItem.
Making bottom navigation bar items interactive.
Adding navigation.
Customizing the bottom navigation bar.

What does in Flutter Bottom Navigation Bar mean?

BottomNavigationBar is a widget that displays a row of widgets at the bottom of the application. The widget displayed at the bottom can be used to quickly navigate between screens or pages. BottomNavigationBar contains four to five icons.

Now let’s start working on our BottomNavigationBar in a flutter.

To demonstrate how to make one I have created a project that contains three screens, named home, search, and profile. All the screens are stateless widgets containing a Text widget containing their respective names.

import 'package:flutter/material.dart';

class BottomBar extends StatefulWidget {
  const BottomBar({super.key});

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: const Center(child: Text("Bottom Bar")),
    );
  }
}

This is a dart file name bottom_bar, I will be writing and editing this file to add a bottom navigation bar in a flutter.

Adding BottomNavigationBar and BottomNavigationBaritem

The BottomNavigationBar widget is passed to the bottomNaivgationBar property of the scaffold and, a list of widgets is required to display items in BottomNavigationbar,

return Scaffold(
  appBar: AppBar(title: const Text("Bottom Bar")),
  body: const HomeScreen(),
  bottomNavigationBar: BottomNavigationBar(
    selectedItemColor: Colors.blueGrey,
    unselectedItemColor: const Color(0xFF526488),
    items: const [
      BottomNavigationBarItem(
        label: 'Home',
        icon: Icon(FluentSystemIcons.ic_fluent_home_regular),
        activeIcon: Icon(FluentSystemIcons.ic_fluent_home_filled)),
      BottomNavigationBarItem(
        label: 'Search',
        icon: Icon(FluentSystemIcons.ic_fluent_search_regular),
        activeIcon: Icon(FluentSystemIcons.ic_fluent_search_filled)),
      BottomNavigationBarItem(
        label: 'Person',
        icon: Icon(FluentSystemIcons.ic_fluent_person_accounts_regular),
        activeIcon:
            Icon(FluentSystemIcons.ic_fluent_person_accounts_filled)),
    ]),
);

BottomNavigationBar requires the items property to display the items. Items require a list of widgets of type BottomNavigationBarItem.

BottomNavigationBarItem holds the data of the actual item to display in the navigation bar.

BottomNavigationBarItem requires two properties that are label and an icon, I have used another property called activeIcon which displays another icon if that item is selected by the user.

Making the items interactive

To achieve this we will make a variable, and use the currentIndex, and on onTap properties of BottomNavigationBar.

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0; //New
 
  void _onItemTap(int index) { //New
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: const HomeScreen(),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex, //New
          onTap: _onItemTap, //New
          .
          .
          items: const [
           .
           .
    );
  }
}

The _selectedIndex variable will hold the index of the selected item which will be used by the currentIndex property to update the index.

The onItemTap is a function that is passed to the onTap callback which passes the selected index to the function. We simply use the returned index to update the state of _selectedIndex and this will update the item selected in the bottom navigation bar.

Adding navigation

To display the page or screen of the selected item we will make a list of screens. I will use the pages I created at the start in the respective order of the items in the bottom navigation bar.

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;

  static final List<Widget> _pages = <Widget>[ //New
    const HomeScreen(),
    const SearchScreen(),
    const ProfileScreen(),
  ];

  .
  .

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: _pages[_selectedIndex], //New
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          .
          .
          items: const [
            .
            .
          ]),
    );
  }
}

The _pages is a list of widgets that contain the pages.

To show the pages in the body we will the _selectedIndex variable to update the content of the body as shown in the code.

Removing the labels

Now you have seen that whenever you click on the item a pop-up comes up with the name of the item. It is quite annoying in the mobile application so let’s remove it.

class _BottomBarState extends State<BottomBar> {
  . 
  .
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: _screenList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
          .
          .
          showSelectedLabels: false, //New
          showUnselectedLabels: false, //New
          .
          .
          items: const [
            .
            .
          ]),
    );
  }
}

To remove the labels we have set the showSelectedLabels and showUnselectedLabels properties of BottomNavitionBar to false.

Changing the appearance of the selected and unselected item

Selected Item

If you want to change the appearance of the selected item then you can play with some properties like selectedItemColor, and selectedIconTheme. I have turned off the labels but if you didn’t then selectedLabelStyle can be used to change the label style

class _BottomBarState extends State<BottomBar> {
  .   
  .

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: _screenList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
          selectedIconTheme: const IconThemeData(color: Colors.blue, size: 40), //New
          selectedItemColor: Colors.blueGrey, //New
          selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold), //New
          items: const [
            .  
            . 
          ]),
    );
  }
}

Unselected Items

If you also want to change the appearance of unselected items then you can play with some properties like unselectedIconTheme and unselectedIconColor.

class _BottomBarState extends State<BottomBar> {
 .    
 .

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: _screenList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          unselectedIconTheme: const IconThemeData(color: Color(0xFF526488) ) //New,
          unselectedItemColor: const Color(0xFF526488), // New
          items: const [
            .   
            .
          ]),
    );
  }
}

Generally, I do not color or change the theme of unselected items to some funky shining as it may mislead users or confuse them with the selected item.

Changing the BottomNavigationbar type

Now, you have interacted with the bottom navigation bar then you have found out that the icons are shifting when you change the selected item.

Those who are ok with it are, fine but those who want to fix it

add the type property to BottomNavigationBar and change it to fix, by default it is shifting.

Here is the full code of the Bottom Navigation Bar

class BottomBar extends StatefulWidget {
  const BottomBar({super.key});

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0; 
  static final List<Widget> _screenList = <Widget>[
    const HomeScreen(),
    const SearchScreen(),
    const ProfileScreen(),
  ];

  void onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Bottom Bar")),
      body: _screenList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _selectedIndex,
          selectedIconTheme: const IconThemeData(color: Colors.blue, size: 30),
          onTap: onItemTap,
          elevation: 10,
          selectedItemColor: Colors.blueGrey,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          type: BottomNavigationBarType.fixed,
          unselectedItemColor: const Color(0xFF526488),
          items: const [
            BottomNavigationBarItem(
                label: 'Home',
                icon: Icon(FluentSystemIcons.ic_fluent_home_regular),
                activeIcon: Icon(FluentSystemIcons.ic_fluent_home_filled)),
            BottomNavigationBarItem(
                label: 'Search',
                icon: Icon(FluentSystemIcons.ic_fluent_search_regular),
                activeIcon: Icon(FluentSystemIcons.ic_fluent_search_filled)),
            BottomNavigationBarItem(
                label: 'Person',
                icon: Icon(FluentSystemIcons.ic_fluent_person_accounts_regular),
                activeIcon:
                    Icon(FluentSystemIcons.ic_fluent_person_accounts_filled)),
          ]),
    );
  }
}

This is how you can add a bottom navigation bar in your flutter application and tweak its properties to change its look and feel.

To learn more about the navigation bar in flutter you can always refer to the documentation.

Need to know about scaffolds then refer to the Know the widget: Scaffold post where you will learn about all the properties a beginner needs to know.