Flutter — BottomNavigationBar Guide

Today let’s learn about a material widget widely used in multi-screen flutter apps. The widget is called BottomNavigationBar, it is just a bottom bar used for navigating between pages according to the material specifications.

BottomNavigationBar class

A material widget that’s displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. It’s ideal for small screens, but if you want a similar functionality like this for larger screens, side navigation may be a better fit.

A bottom navigation bar is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument.

First, let's try to implement a simple bottom navigation bar. Then, we’ll play with its properties to better suit the need.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.w500);
  final List<Widget> _children = [
    Text(
      "Home",
      style: optionStyle,
    ),
    Text(
      "Messages",
      style: optionStyle,
    ),
    Text(
      "Profile",
      style: optionStyle,
    )
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: _children[_currentIndex]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            label: 'Messages',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

In our bottom navigation bar, we return a list of items we would like to appear in the bottom bar. as you can see, we have three items with tabs labeled as Home, Messages, and Profile.

We also havecurrentIndex property and set it to the _currentIndex to reflect the current tab we are on. The current index is how the navigation bar knows which icon to animate as the currently selected tab.

We have a list of widgets stored in _children to be used to render widgets based on the currently selected tab.

We added the body of our scaffold which is the widget that gets displayed between our app bar and bottom navigation bar. We set the body equal to the corresponding widget in our _children widget list, so that when an item is selected, its corresponding widget/screen is displayed.

Next, we added the onTap property of the bottom navigation bar. We set it equal to a function called onTabTapped that will take in the index of the tab that is tapped and decide what to do with it.

Great! we have finally created our bottom navigation bar.

Now it's time to play with its properties.

backgroundColor

backgroundColor changes the background color of the BottomNavigationBar.

 BottomNavigationBar(
  backgroundColor: Colors.yellowAccent,
    items: [...],
  ),

elevation

elevation controls the size of the shadow below the material and the opacity of the elevation overlay color if it is applied.

BottomNavigationBar(
  elevation: 5,
    items: [...],
  ),

With elevation: 0,

With elevation: 15,

fixedColor

fixedColor to set the color of selected BottomNavigationBarItem.icon

BottomNavigationBar(
  fixedColor: Colors.red,
    items: [...],
  ),

iconSize

iconSize changes the size of all of the BottomNavigationBarItem icons.

BottomNavigationBar(
  fixedColor: Colors.red,
  iconSize: 35,
    items: [...],
  ),

items

items defines the appearance of the button items that are arrayed within the bottom navigation bar

BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.mail),
        label: 'Messages',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ],
 ),

Note: If the item count > 3 then you should specify the backgroundColor in the BottomNavigationBarItem. You can also change the backgroundColor of each item by specifying the backgroundColor property in BottomNavigationBarItem.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: onTabTapped,
  unselectedItemColor: Colors.blueGrey,
  showUnselectedLabels: true,
  items: [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.yellow,
      icon: Icon(Icons.mail),
      label: 'Messages',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.greenAccent,
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.pink,
      icon: Icon(Icons.camera),
      label: 'Camera',
    )
  ],
),

selectFontSize and unselectedFontSize

selectedFontSize changes the font size of the BottomNavigationBarItem labels when they are selected.

similarly, you can useunselectedFontSize to change the font size of the BottomNavigationBarItem labels when they are not selected.

BottomNavigationBar(
  selectedFontSize: 25,
  unselectedFontSize: 12,
    items: [...],
  ),

selectedIconTheme and unselectedIconTheme

selectedIconTheme change the size, opacity, and color of the icon in the currently selected BottomNavigationBarItem.icon.

similarly, you can useunselectedIconTheme to change the size, opacity, and color of the icon currently unselected BottomNavigationBarItem.icons.

BottomNavigationBar(
 IconThemeData(color: Colors.red, size: 25, opacity: .8),
unselectedIconTheme:
    IconThemeData(color: Colors.green, size: 25, opacity: .8),
    items: [...],
  ),

That’s it for this article! I hope you enjoyed it and leave a few claps if you did. Also, leave a comment below if with any questions / suggestions!