Filter by Widgets


BottomNavigationBar Widget

This Tutorials is posted by niebin312 at 04-03-2019 05:14:22



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.

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 = 50and 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.

Whole code in GitHub,star to support.


0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.