In the previous parts of this tutorial, we have been able to create the following page:
In this part, we will learn how to add tabs to the bottom of this page.
In order to add a navigation bar to the bottom of the page, we have to set the
bottomNavigationBar property of the
If your bottom navigation bar items are more than three, you have to manually set the
type of the navigation bar to
BottomNavigationBarType.fixed, otherwise the navigation bar items won’t be shown! Each
BottomNavigationBarItem has an
icon and a
title. Unfortunately, according to material design principals, the title under the icon is mandatory and must be provided. So in order to hide it, we have to pass an empty
Text to it. Read this thread on github for more information.
Since I could not find all the icons I was looking for in the
Icons class, I created my custom icons using the tool provided by fluttericon.com. Please read this article to learn how to create and use custom icons.
Here is the result:
Now if you click on any of those navigation bar items, nothing happens. Why? Because the active navigation bar item (the blue one) won’t change unless you change it manually. How can you change it manually? By setting the
currentIndex property of the
BottomNavigationBar class. Let’s give it a try and manually set it to 1, reload the app and see what happens:
As you can see, the second item (whose index is 1) has been selected: