Creating Slowly App UI with Flutter (Part 4)

Meysam Mahfouzi
5 min readFeb 2, 2019

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 Scaffold class.

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:

--

--