ButtomNavigationBar() in Flutter Implementation

Manish Paul
Nov 1 · 3 min read
Photo by Christopher Gower on Unsplash

Every widget in your Flutter application is a class. So we are here to know about a class(or widget) called ButtomNavigationBar() and its implementation.

Before diving into the implementation, let us quickly see the definition of ButtomNavigationBar() by Flutter team which BTW is very clearly described.

A material widget that’s displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app.

Now, that you’ve read the definition it’s time for us to get our hands dirty and build our ButtomNavigationBar().

We’ll make this particular bar today.

So now without any further ado, let’s get the work done.

1.Build a widget that returns Scaffold()

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
);
}
}

2.Add the body and bottomNavigationBar arguments :

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ,
bottomNavigationBar: BottomNavigationBar(),
);
}
}

3. Add up to 5 items inside the bar using BottomNavigationBarItem() class and passing two of its arguments icon and title :

NB : You need to add your BottomNavigationBarItem() within the items arguement, which is actually a list.

items:[
BottomNavigationBarItem(
icon: Icon(Icons.store),
title: Text('Categories'),
),
BottomNavigationBarItem(
icon: Icon(Icons.thumb_up),
title: Text('Latest'),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Wish List'),
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text('My Cart'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Account'),
),
],

4. If you don’t see the labels(title) of each icon that is not selected and also if the items are not equally distributed, then add the following two arguments inside ButtomNavigationBar() :

showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,

5. Here’s the complete code. Edit the body argument we left blank in step #2.

import 'package:flutter/material.dart';
import './placeholder_widget.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(),
home: MyHomePage(title: 'Flutter Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _children = [
PlaceholderWidget(Colors.teal),
PlaceholderWidget(Colors.blue),
PlaceholderWidget(Colors.green),
PlaceholderWidget(Colors.amber),
PlaceholderWidget(Colors.white),
];
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
@overrideWidget build(BuildContext context) {
return Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
elevation: 10,
unselectedItemColor: Colors.black54,
selectedItemColor: Colors.teal,
iconSize: 30,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.store),
title: Text('Categories'),
),
BottomNavigationBarItem(
icon: Icon(Icons.thumb_up),
title: Text('Latest'),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Wish List'),
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text('My Cart'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Account'),
),
],),);
}
}

The codes in bold are not specific to this topic (directly), so it’s self explanatory. However, if needed please leave a comment, I’ll definitely add an article to explain that code.

I hope I was able to help you with your query of ButtomNavigationBar().

Manish Paul

Written by

I’m a self-employed Application Developer. I use this(Medium) platform to share my knowledge of programming with ambitious self-learner coders. Hello World!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade