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.BottomNavigationBar
widget.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.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.BottomNavigationBarItem
list, so we can see the constructor of the BottomNavigationBarItem
for more detail.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.BottomNavigationBarType.fixed
, so you can see change the type to shifting
to see the effect . _BottomNavBarState
, var _curIndex = 0;
, then use it in the BottomNavigationBar
._BottomNavBarState
class, var contents = "Home";
. Use it in the Scaffold
.onTap
as follows.BottomNavigationBar
as below.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
. Now I set the iconSize = 50
and change the first item as below.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.