Creating Slowly App UI with Flutter (Part 4)

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.