# Widgets 11 | BottomNavigationBar ## Before Start We have simply used the `BottomNavigationBar` before, So in this tutorial, let's look at its detail. This widget usually used with the parameter `bottomNavigationBar` of the `Scaffold`. It shows at the bottom of the screen. Let's create a page to show our widget first. ```dart import "package:flutter/material.dart"; import 'package:flutter_widgets/const/_const.dart'; class BottomNavBarPage extends StatefulWidget { @override _BottomNavBarState createState() => _BottomNavBarState(); } class _BottomNavBarState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(PageName.BOTTOM_NAV_BAR), ), body: Text("Body"), bottomNavigationBar: Container( color: RED, child: Text("this is bottom"), ), ); } } ``` It will show the picture as below, we will replace the Container to our `BottomNavigationBar` widget. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWso08K-djq31jUQEcx%2Fbottom-navigation-bar-01.png?alt=media\&token=1c28252a-7c7e-4340-874d-ff6751b6a6a0) ## Simple Use You can use the `bottomNavigationBar` as a common widget, but usually, we suggest you use the `BottomNavigationBar` that provided by the flutter. So Let's look at an example. ```dart Widget _bottomNormal()=> BottomNavigationBar( items: [ BottomNavigationBarItem( backgroundColor: BLUE_DEEP, icon: Icon( Icons.home, size: 30, ), title: Text( "Home", style: TextStyle(fontSize: 30), ), ), BottomNavigationBarItem( backgroundColor: BLUE_DEEP, icon: Icon( Icons.assignment_ind, size: 30, ), title: Text( "User", style: TextStyle(fontSize: 30), ), ) ], ); ``` ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWsq6nChTo33ZqEMplb%2Fbottom-navigation-bar-02.png?alt=media\&token=b127bfb3-59f9-4ba2-8da7-ecb8fb2c50bd) If you click this, it isn't change the page, I will do that late. Let's look at the constructor first. ## Constructor The constructor is so important to use a widget, so before using it, you should watch them. ```dart BottomNavigationBar({ Key key, @required this.items, this.onTap, this.currentIndex = 0, BottomNavigationBarType type, this.fixedColor, this.iconSize = 24.0, } ``` The `items` is our children buttons, the `onTap` is a function that when you click the item, it will be called. The `currentIndex` set the current bottom button. Others I will explain them one by one. ## items It is a List, it defines as below. ```dart final List items; ``` It is a `BottomNavigationBarItem` list, so we can see the constructor of the `BottomNavigationBarItem` for more detail. ```dart const BottomNavigationBarItem({ @required this.icon, this.title, Widget activeIcon, this.backgroundColor, }) ``` The `icon` is the icon of the item, it is a widget, but usually we should use the `Icon` widget. The `title` is also a widget, but usually we use a `Text`. The `activeIcon` is a widget too. If your item is current item, then the `activeIcon` will show. If you don't set it or set to null, it will show the `icon`. The `backgroundColor` is also easy to understand,it will set the background color of the bottom bar. But you should care about that it has the effect only when you set the type: `BottomNavigationBarType.shifting` in the `BottomNavigationBar`. Let's look at an example. ```dart Widget _itemIconOnly() => BottomNavigationBar( items: [ BottomNavigationBarItem( backgroundColor: BLUE_LIGHT, icon: Icon( Icons.home, size: 30, color: TEXT_BLACK_LIGHT, ), title: Text( "Home", style: TextStyle(fontSize: 30, color: RED), ), activeIcon: Icon( Icons.home, size: 30, color: RED, ), ), BottomNavigationBarItem( backgroundColor: BLUE_DEEP, icon: Icon( Icons.book, size: 30, color: TEXT_BLACK_LIGHT, ), title: Text( "Articles", style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT), ), ), BottomNavigationBarItem( backgroundColor: BLUE_DEEP, icon: Icon( Icons.assignment_ind, size: 30, color: TEXT_BLACK_LIGHT, ), title: Text( "User", style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT), ), ), ], ); ``` The result shows in the picture. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWt3ct5_fXNQHOL39U8%2Fbottom-navigation-bar-03.png?alt=media\&token=e4a0bd08-13ff-4526-b955-68981cba4bea) You can see that the background color doesn't show as we want to. Because the default type is **`BottomNavigationBarType.fixed`** , so you can see change the type to **`shifting`** to see the effect . ```dart type: BottomNavigationBarType.shifting, ``` The result is below. But the titles of other items are hidden, so make sure that is your requirements. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWt4FBb7ZIqiCbN8rKl%2Fbottom-navigation-bar-04.png?alt=media\&token=65763811-00d7-413a-ad00-d474a6a830d5) ## onTap & currentIndex When we click the items above, it doesn't change anything, but we want to change some contents. So these two parameters are very helpful for this. First, we define a variable in the `_BottomNavBarState`, `var _curIndex = 0;`, then use it in the `BottomNavigationBar`. ```dart currentIndex: _curIndex, ``` Also, we should define a content variable in `_BottomNavBarState` class, `var contents = "Home";`. Use it in the `Scaffold`. ```dart body: Container( alignment: Alignment.center, child: Text( contents, style: TextStyle(color: RED, fontSize: 40), ), ), ``` Then set the `onTap` as follows. ```dart onTap: (index) { setState(() { _curIndex = index; switch (_curIndex) { case 0: contents = "Home"; break; case 1: contents = "Articles"; break; case 2: contents = "User"; break; } }); }, ``` The whole code about the `BottomNavigationBar` as below. ```dart Widget _indexBottom() => BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon( Icons.home, size: 30, color: TEXT_BLACK_LIGHT, ), title: Text( "Home", style: TextStyle( fontSize: 30, color: _curIndex == 0 ? RED : TEXT_BLACK_LIGHT), ), activeIcon: Icon( Icons.home, size: 30, color: RED, ), ), BottomNavigationBarItem( icon: Icon( Icons.book, size: 30, color: TEXT_BLACK_LIGHT, ), title: Text( "Articles", style: TextStyle( fontSize: 30, color: _curIndex == 1 ? RED : TEXT_BLACK_LIGHT), ), activeIcon: Icon( Icons.book, size: 30, color: RED, ), ), BottomNavigationBarItem( icon: Icon( Icons.assignment_ind, size: 30, color: TEXT_BLACK_LIGHT, ), title: Text( "User", style: TextStyle( fontSize: 30, color: _curIndex == 2 ? RED : TEXT_BLACK_LIGHT), ), activeIcon: Icon( Icons.assignment_ind, size: 30, color: RED, ), ), ], type: BottomNavigationBarType.fixed, currentIndex: _curIndex, onTap: (index) { setState(() { _curIndex = index; switch (_curIndex) { case 0: contents = "Home"; break; case 1: contents = "Articles"; break; case 2: contents = "User"; break; } }); }, ); ``` Then you will get the result as below. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWtBXs7ZfT3Gsl_ybTq%2Fbottom-navigation-bar-05.gif?alt=media\&token=a581ce19-064b-425e-babb-3938122cf520) ## fixedColor If you do not set a color to the icon or title, it will show this color of the parameter. Let's just change the first item as follows. ```dart BottomNavigationBarItem( icon: Icon( Icons.home, size: 30, ), title: Text( "Home", style: TextStyle(fontSize: 30), ), ), ``` And change the `fixedColor` to `PURPLE`, you can get the below result. But you should care about that if the type is `BottomNavigationBarType.shifting`, it hasn't the effect. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWtDgmX2uEuXKp19xMX%2Fbottom-navigation-bar-06.png?alt=media\&token=cb5a4321-cb58-4a85-a2e8-52b490deb01f) ## iconSize If you do not set the size of the item, you can set it with the parameter of the `iconSize`. Now I set the `iconSize = 50`and change the first item as below. ```dart BottomNavigationBarItem( icon: Icon( Icons.home, ), title: Text( "Home", style: TextStyle(), ), ), ``` Then it will show like this. The icon becomes larger and the title uses default size. But I recommend you just custom your own icon and title, don't use this one. ![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWsjFPr1UP0DfnxaKBC%2F-LWtGXZ4L0Dpa4p5Beiq%2Fbottom-navigation-bar-07.png?alt=media\&token=6ff285d1-e40d-4440-94a7-3e546f8e29a3) ## Conclusion Today, we have learned how to use the `BottomNavigationBar` in the flutter. Its style is so common in our app. The flutter makes it easy to implement this function. So keep learning, you will be good at developing with the flutter. Thanks for your reading! The end. #### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. | Facebook Page | Twitter | GitHub | Medium | | ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- | | [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://flutteropen.gitbook.io/flutter-widgets/widgets-11-or-bottomnavigationbar.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.