Widgets 11 | BottomNavigationBar

In this tutorial, you will learn how to use the BottomNavigationBar.

Before Start

We have simply used the BottomNavigationBar before, So in this tutorial, let's look at its detail. This widget usually used with the parameter bottomNavigationBar of the Scaffold. It shows at the bottom of the screen. Let's create a page to show our widget first.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class BottomNavBarPage extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.BOTTOM_NAV_BAR),
      ),
      body: Text("Body"),
      bottomNavigationBar: Container(
        color: RED,
        child: Text("this is bottom"),
      ),
    );
  }
}

It will show the picture as below, we will replace the Container to our BottomNavigationBar widget.

Simple Use

You can use the bottomNavigationBar as a common widget, but usually, we suggest you use the BottomNavigationBar that provided by the flutter. So Let's look at an example.

Widget _bottomNormal()=> BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        backgroundColor: BLUE_DEEP,
        icon: Icon(
          Icons.home,
          size: 30,
        ),
        title: Text(
          "Home",
          style: TextStyle(fontSize: 30),
        ),
      ),
      BottomNavigationBarItem(
        backgroundColor: BLUE_DEEP,
        icon: Icon(
          Icons.assignment_ind,
          size: 30,
        ),
        title: Text(
          "User",
          style: TextStyle(fontSize: 30),
        ),
      )
    ],
  );

If you click this, it isn't change the page, I will do that late. Let's look at the constructor first.

Constructor

The constructor is so important to use a widget, so before using it, you should watch them.

 BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  }

The items is our children buttons, the onTap is a function that when you click the item, it will be called. The currentIndex set the current bottom button. Others I will explain them one by one.

items

It is a List, it defines as below.

  final List<BottomNavigationBarItem> items;

It is a BottomNavigationBarItem list, so we can see the constructor of the BottomNavigationBarItem for more detail.

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })

The icon is the icon of the item, it is a widget, but usually we should use the Icon widget. The title is also a widget, but usually we use a Text. The activeIcon is a widget too. If your item is current item, then the activeIcon will show. If you don't set it or set to null, it will show the icon. The backgroundColor is also easy to understand,it will set the background color of the bottom bar. But you should care about that it has the effect only when you set the type: BottomNavigationBarType.shifting in the BottomNavigationBar. Let's look at an example.

  Widget _itemIconOnly() => BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            backgroundColor: BLUE_LIGHT,
            icon: Icon(
              Icons.home,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Home",
              style: TextStyle(fontSize: 30, color: RED),
            ),
            activeIcon: Icon(
              Icons.home,
              size: 30,
              color: RED,
            ),
          ),
          BottomNavigationBarItem(
            backgroundColor: BLUE_DEEP,
            icon: Icon(
              Icons.book,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Articles",
              style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
            ),
          ),
          BottomNavigationBarItem(
            backgroundColor: BLUE_DEEP,
            icon: Icon(
              Icons.assignment_ind,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "User",
              style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
            ),
          ),
        ],
      );

The result shows in the picture.

You can see that the background color doesn't show as we want to. Because the default type is BottomNavigationBarType.fixed , so you can see change the type to shifting to see the effect .

 type: BottomNavigationBarType.shifting,

The result is below. But the titles of other items are hidden, so make sure that is your requirements.

onTap & currentIndex

When we click the items above, it doesn't change anything, but we want to change some contents. So these two parameters are very helpful for this. First, we define a variable in the _BottomNavBarState, var _curIndex = 0;, then use it in the BottomNavigationBar.

currentIndex: _curIndex,

Also, we should define a content variable in _BottomNavBarState class, var contents = "Home";. Use it in the Scaffold.

body: Container(
        alignment: Alignment.center,
        child: Text(
          contents,
          style: TextStyle(color: RED, fontSize: 40),
        ),
      ),

Then set the onTap as follows.

  onTap: (index) {
          setState(() {
            _curIndex = index;
            switch (_curIndex) {
              case 0:
                contents = "Home";
                break;
              case 1:
                contents = "Articles";
                break;
              case 2:
                contents = "User";
                break;
            }
          });
        },

The whole code about the BottomNavigationBar as below.

 Widget _indexBottom() => BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Home",
              style: TextStyle(
                  fontSize: 30, color: _curIndex == 0 ? RED : TEXT_BLACK_LIGHT),
            ),
            activeIcon: Icon(
              Icons.home,
              size: 30,
              color: RED,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.book,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "Articles",
              style: TextStyle(
                  fontSize: 30, color: _curIndex == 1 ? RED : TEXT_BLACK_LIGHT),
            ),
            activeIcon: Icon(
              Icons.book,
              size: 30,
              color: RED,
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.assignment_ind,
              size: 30,
              color: TEXT_BLACK_LIGHT,
            ),
            title: Text(
              "User",
              style: TextStyle(
                  fontSize: 30, color: _curIndex == 2 ? RED : TEXT_BLACK_LIGHT),
            ),
            activeIcon: Icon(
              Icons.assignment_ind,
              size: 30,
              color: RED,
            ),
          ),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _curIndex,
        onTap: (index) {
          setState(() {
            _curIndex = index;
            switch (_curIndex) {
              case 0:
                contents = "Home";
                break;
              case 1:
                contents = "Articles";
                break;
              case 2:
                contents = "User";
                break;
            }
          });
        },
      );

Then you will get the result as below.

fixedColor

If you do not set a color to the icon or title, it will show this color of the parameter. Let's just change the first item as follows.

 BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              size: 30,
            ),
            title: Text(
              "Home",
              style: TextStyle(fontSize: 30),
            ),
          ),

And change the fixedColor to PURPLE, you can get the below result. But you should care about that if the type is BottomNavigationBarType.shifting, it hasn't the effect.

iconSize

If you do not set the size of the item, you can set it with the parameter of the iconSize. Now I set the iconSize = 50and change the first item as below.

 BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              "Home",
              style: TextStyle(),
            ),
          ),

Then it will show like this. The icon becomes larger and the title uses default size. But I recommend you just custom your own icon and title, don't use this one.

Conclusion

Today, we have learned how to use the BottomNavigationBar in the flutter. Its style is so common in our app. The flutter makes it easy to implement this function. So keep learning, you will be good at developing with the flutter.

Thanks for your reading!

The end.

Whole code in GitHub,star to support.

Facebook Page	Twitter	GitHub	Medium
Flutter Open	NieBin	NieBin	FlutterOpen