Flutter BottomNavigationBar class
In this article, we’ll be creating a BottomNavigationBar that switches between different tabs. The BottomNavigationBar is provided by Flutter that is widely used in many mobile apps. BottomNavigationBar is used for creating a bottom navigation bar in mobile apps and to help navigate between different app pages or screens.
The example application will be simple, it consists of 3 screens Home, Favorite, and Settings screen.
Create a project and then we can start off by creating our main pages that will be displayed in our tab system. These will be simple StatefulWidgets and body as an empty Container and BottomNavigationBar as an empty list of items.
The bottom navigation bar can contain multiple items such as text labels, icons, or both.
In the BottomNavigationBar Constructor, we need to pass a list of BottomNavigationBarItem with label and icon, currentIndex for identifying the active tab, selectedItemColor, and onTap Function that display the particular screen to the user. Here we gave Icon and Lable to each BottomNavigationBarItem. In the BottomNavigationBar widget, there is a list of properties that we can configure.
- items — The lists of items that display on the screen based on the selected tab within the bottom navigation bar.
- currentIndex — index of the selected tab
- onTap — It is called when the user taps one of the tab bar items,
- selectedItemColor — This is the color of the tab when the tab is selected.
When the user taps on one of the items on the navigation bar, the onTap function is used to change the value of the selected item’s index. Here we’re calling onItemTapped() to update _selectedIndex.
Based on _selectedIndex we’re displaying required destinations/screen, using _widgetOptions[_selectedIndex] in body.
Summery
In this article, we have discussed What is the Bottom Navigation Bar in Flutter along with how to implement it in a Flutter. Below is a complete code example of our simple Flutter app.
