How to implement Bottom NavigationBar in Flutter

In this guide, we will discuss how to implement Bottom NavigationBar in Flutter. For this, we should know some basic information about what a Bottom NavigationBar in flutter is. A bottom navigation bar is a material widget that is present at the bottom of an app for selecting or navigating to different pages of the app. The bottom navigation bar comprises various items such as text labels, icons, or both, spread out on top of a piece of material. It gives fast navigation between the high-level perspectives on an application. It must have at least two bottom navigation items. Otherwise, we will get an error. It is required to have the icon and title properties, and we need to set relevant widgets for them.

Some of the Properties used in bottom NavigationBar are given below.

currentIndexThis property is used for the selected item is an index.
type It determines the layout and behavior of a bottom navigation bar. It behaves in two different ways that are: fixed and shifting
onTapIt is called when we tapped one of the items on the screen
backgroundColorThis property is used for the background color of the navigation bar.
iconSizeIt is used to specify the size of all bottom navigation item icons
itemsdefine the appearance of the buttons that are displayed in the bottom navigation bar. This should have at least two items and five at the most
elevationThis property is used to whether this navigation bar should show an elevation.
selectedItemColorIt is used for determining the color of which items are being selected
unselectedItemColorIt is used for determining the color of which items are not being selected
selectedLabelStyleIt is used for determining the style of which items are being selected

Let’s take an example of how we can implement the Bottom NavigationBar in our flutter application.

import 'package:flutter/material.dart';

class NavigationScreen extends StatefulWidget {
  const NavigationScreen({Key? key}) : super(key: key);

  @override
  State<NavigationScreen> createState() => _NavigationScreenState();
}

class _NavigationScreenState extends State<NavigationScreen> {
  int _selectedIndex = 0;
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  static const List<Widget> _widgetOptions = <Widget>[
    Text('Home Page',
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('Business Page',
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
    Text('School Page',
        style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Navigation Bar'),
        centerTitle: true,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.grey,
        selectedItemColor: const Color(0xff5D3AC1),
        unselectedItemColor: const Color(0xff848490),
        elevation: 0,
        iconSize: 40,
        selectedLabelStyle: const TextStyle(fontSize: 12, height: 1.5),
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
    );
  }
}

In the above code, we have used the BottomNavigationBar within a scaffold widget. This navigation contains three BottomNavigationBarItem widgets. Here, we have set the currentIndex to 0 which selects an item that is in grey color. The onTap() function is used to change the selected item’s index and then display a corresponding message.

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

When we click on the Business icon in the bottom navigation bar, it will give the below screen.

When we click on the School icon in the bottom navigation bar, it will give the below screen.

Thank you for reading the Guide about How to implement the Bottom NavigationBar in Flutter.

Also read: How to Implement InteractiveViewer in Flutter