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.
import "package:flutter/material.dart";import 'package:flutter_widgets/const/_const.dart';class BottomNavBarPage extends StatefulWidget {_BottomNavBarState createState() => _BottomNavBarState();}class _BottomNavBarState extends State<BottomNavBarPage> {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.
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.
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),),)],);
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.
BottomNavigationBar({Key key,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.
final List<BottomNavigationBarItem> items;
It is a BottomNavigationBarItem
list, so we can see the constructor of the BottomNavigationBarItem
for more detail.
const BottomNavigationBarItem({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.
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.
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 .
type: BottomNavigationBarType.shifting,
The result is below. But the titles of other items are hidden, so make sure that is your requirements.
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
.
currentIndex: _curIndex,
Also, we should define a content variable in _BottomNavBarState
class, var contents = "Home";
. Use it in the Scaffold
.
body: Container(alignment: Alignment.center,child: Text(contents,style: TextStyle(color: RED, fontSize: 40),),),
Then set the onTap
as follows.
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.
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.
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.
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.
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.
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.
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.