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.

currentIndex	This 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
onTap	It is called when we tapped one of the items on the screen
backgroundColor	This property is used for the background color of the navigation bar.
iconSize	It is used to specify the size of all bottom navigation item icons
items	define 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
elevation	This property is used to whether this navigation bar should show an elevation.
selectedItemColor	It is used for determining the color of which items are being selected
unselectedItemColor	It is used for determining the color of which items are not being selected
selectedLabelStyle	It 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: