BottomNavigationBarbefore, So in this tutorial, let's look at its detail. This widget usually used with the parameter
Scaffold. It shows at the bottom of the screen. Let's create a page to show our widget first.
bottomNavigationBaras a common widget, but usually, we suggest you use the
BottomNavigationBarthat provided by the flutter. So Let's look at an example.
itemsis our children buttons, the
onTapis a function that when you click the item, it will be called. The
currentIndexset the current bottom button. Others I will explain them one by one.
BottomNavigationBarItemlist, so we can see the constructor of the
BottomNavigationBarItemfor more detail.
iconis the icon of the item, it is a widget, but usually we should use the
titleis also a widget, but usually we use a
activeIconis a widget too. If your item is current item, then the
activeIconwill show. If you don't set it or set to null, it will show the
backgroundColoris 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:
BottomNavigationBar. Let's look at an example.
BottomNavigationBarType.fixed, so you can see change the type to
shiftingto see the effect .
var _curIndex = 0;, then use it in the
var contents = "Home";. Use it in the
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 = 50and change the first item as below.
BottomNavigationBarin 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.