Flutter — Bottom Navigation

Bottom navigation bar is a cool widget which has been given by the flutter framework.

We can easily add bottom navigation bar to the scaffold. In the scaffold there is a attribute called bottomNavigationBar and we can assign BottomNavigationBar for that. Inside the BottomNavigationBar class we can define the navigation buttons behavior and the what are the buttons need to show inside the bar.

There are mainly two attribute which is very useful when consider about BottomNavigationBar.

1. type

2. items

type — There are two types available. fixed or shifting. If we add fixed type , the buttons inside bottom navigation does not show any effect when use click a particular button. It just keep fixed to the bottom navigation. If we add shifting , it will show some kind of cool animation when we click a particular button.

items — For this array we can pass BottomNavigationBarItem objects.When adding items to the bottom navigation it is required to add at least 2 items.

There are two required attributes in the BottomNavigationBarItem, icon and the text. In the current version of flutter we cannot remove the button text. We can add empty text. But it take some padding space and It clutter the UI. Hope flutter team will make text as optional.

This is the code .

In next article I will show you the nice ways of using floating button inside the bottom navigation.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.