Widgets 11 | BottomNavigationBar
In this tutorial, you will learn how to use the 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.1
import "package:flutter/material.dart";
2
import 'package:flutter_widgets/const/_const.dart';
3
​
4
class BottomNavBarPage extends StatefulWidget {
5
@override
6
_BottomNavBarState createState() => _BottomNavBarState();
7
}
8
​
9
class _BottomNavBarState extends State<BottomNavBarPage> {
10
@override
11
Widget build(BuildContext context) {
12
return Scaffold(
13
appBar: AppBar(
14
title: Text(PageName.BOTTOM_NAV_BAR),
15
),
16
body: Text("Body"),
17
bottomNavigationBar: Container(
18
color: RED,
19
child: Text("this is bottom"),
20
),
21
);
22
}
23
}
Copied!
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.1
Widget _bottomNormal()=> BottomNavigationBar(
2
items: [
3
BottomNavigationBarItem(
4
backgroundColor: BLUE_DEEP,
5
icon: Icon(
6
Icons.home,
7
size: 30,
8
),
9
title: Text(
10
"Home",
11
style: TextStyle(fontSize: 30),
12
),
13
),
14
BottomNavigationBarItem(
15
backgroundColor: BLUE_DEEP,
16
icon: Icon(
17
Icons.assignment_ind,
18
size: 30,
19
),
20
title: Text(
21
"User",
22
style: TextStyle(fontSize: 30),
23
),
24
)
25
],
26
);
Copied!
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.
1
BottomNavigationBar({
2
Key key,
3
@required this.items,
4
this.onTap,
5
this.currentIndex = 0,
6
BottomNavigationBarType type,
7
this.fixedColor,
8
this.iconSize = 24.0,
9
}
Copied!
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.
1
final List<BottomNavigationBarItem> items;
Copied!
It is a
BottomNavigationBarItem list, so we can see the constructor of the BottomNavigationBarItem for more detail.1
const BottomNavigationBarItem({
2
@required this.icon,
3
this.title,
4
Widget activeIcon,
5
this.backgroundColor,
6
})
Copied!
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.1
Widget _itemIconOnly() => BottomNavigationBar(
2
items: [
3
BottomNavigationBarItem(
4
backgroundColor: BLUE_LIGHT,
5
icon: Icon(
6
Icons.home,
7
size: 30,
8
color: TEXT_BLACK_LIGHT,
9
),
10
title: Text(
11
"Home",
12
style: TextStyle(fontSize: 30, color: RED),
13
),
14
activeIcon: Icon(
15
Icons.home,
16
size: 30,
17
color: RED,
18
),
19
),
20
BottomNavigationBarItem(
21
backgroundColor: BLUE_DEEP,
22
icon: Icon(
23
Icons.book,
24
size: 30,
25
color: TEXT_BLACK_LIGHT,
26
),
27
title: Text(
28
"Articles",
29
style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
30
),
31
),
32
BottomNavigationBarItem(
33
backgroundColor: BLUE_DEEP,
34
icon: Icon(
35
Icons.assignment_ind,
36
size: 30,
37
color: TEXT_BLACK_LIGHT,
38
),
39
title: Text(
40
"User",
41
style: TextStyle(fontSize: 30, color: TEXT_BLACK_LIGHT),
42
),
43
),
44
],
45
);
Copied!
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 . 1
type: BottomNavigationBarType.shifting,
Copied!
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.1
currentIndex: _curIndex,
Copied!
Also, we should define a content variable in
_BottomNavBarState class, var contents = "Home";. Use it in the Scaffold.1
body: Container(
2
alignment: Alignment.center,
3
child: Text(
4
contents,
5
style: TextStyle(color: RED, fontSize: 40),
6
),
7
),
Copied!
Then set the
onTap as follows.1
onTap: (index) {
2
setState(() {
3
_curIndex = index;
4
switch (_curIndex) {
5
case 0:
6
contents = "Home";
7
break;
8
case 1:
9
contents = "Articles";
10
break;
11
case 2:
12
contents = "User";
13
break;
14
}
15
});
16
},
Copied!
The whole code about the
BottomNavigationBar as below.1
Widget _indexBottom() => BottomNavigationBar(
2
items: [
3
BottomNavigationBarItem(
4
icon: Icon(
5
Icons.home,
6
size: 30,
7
color: TEXT_BLACK_LIGHT,
8
),
9
title: Text(
10
"Home",
11
style: TextStyle(
12
fontSize: 30, color: _curIndex == 0 ? RED : TEXT_BLACK_LIGHT),
13
),
14
activeIcon: Icon(
15
Icons.home,
16
size: 30,
17
color: RED,
18
),
19
),
20
BottomNavigationBarItem(
21
icon: Icon(
22
Icons.book,
23
size: 30,
24
color: TEXT_BLACK_LIGHT,
25
),
26
title: Text(
27
"Articles",
28
style: TextStyle(
29
fontSize: 30, color: _curIndex == 1 ? RED : TEXT_BLACK_LIGHT),
30
),
31
activeIcon: Icon(
32
Icons.book,
33
size: 30,
34
color: RED,
35
),
36
),
37
BottomNavigationBarItem(
38
icon: Icon(
39
Icons.assignment_ind,
40
size: 30,
41
color: TEXT_BLACK_LIGHT,
42
),
43
title: Text(
44
"User",
45
style: TextStyle(
46
fontSize: 30, color: _curIndex == 2 ? RED : TEXT_BLACK_LIGHT),
47
),
48
activeIcon: Icon(
49
Icons.assignment_ind,
50
size: 30,
51
color: RED,
52
),
53
),
54
],
55
type: BottomNavigationBarType.fixed,
56
currentIndex: _curIndex,
57
onTap: (index) {
58
setState(() {
59
_curIndex = index;
60
switch (_curIndex) {
61
case 0:
62
contents = "Home";
63
break;
64
case 1:
65
contents = "Articles";
66
break;
67
case 2:
68
contents = "User";
69
break;
70
}
71
});
72
},
73
);
Copied!
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.
1
BottomNavigationBarItem(
2
icon: Icon(
3
Icons.home,
4
size: 30,
5
),
6
title: Text(
7
"Home",
8
style: TextStyle(fontSize: 30),
9
),
10
),
Copied!
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 = 50and change the first item as below.1
BottomNavigationBarItem(
2
icon: Icon(
3
Icons.home,
4
),
5
title: Text(
6
"Home",
7
style: TextStyle(),
8
),
9
),
Copied!
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.
Facebook Page
Twitter
GitHub
Medium
​
​
​
​
​
​
​
​
Last modified 2yr ago