Flutter Bottom Navigation

Muhammad Sabeel Ahmed
2 min readOct 22, 2023

--

In this article, I’m going to share a complete guide to flutter bottom navigation with an example.

How to create BottomNavigation in flutter?

To Create bottom navigation, first, you must need a stateful widget because when the user taps on the icon, you should change the state.

import 'package:flutter/material.dart';

class BottomNavigationExample extends StatefulWidget {
const BottomNavigationExample({Key? key}) : super(key: key);

@override
_BottomNavigationExampleState createState() =>
_BottomNavigationExampleState();
}

class _BottomNavigationExampleState extends State {
int _selectedTab = 0;

List _pages = [
Center(
child: Text("Home"),
),
Center(
child: Text("About"),
),
Center(
child: Text("Products"),
),
Center(
child: Text("Contact"),
),
Center(
child: Text("Settings"),
),
];

_changeTab(int index) {
setState(() {
_selectedTab = index;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: _pages[_selectedTab],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedTab,
onTap: (index) => _changeTab(index),
selectedItemColor: Colors.red,
unselectedItemColor: Colors.grey,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.person), label: "About"),
BottomNavigationBarItem(
icon: Icon(Icons.grid_3x3_outlined), label: "Product"),
BottomNavigationBarItem(
icon: Icon(Icons.contact_mail), label: "Contact"),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: "Settings"),
],
),
);
}
}

Output:

Flutter Bottom Navigation by Sabeel

In the above example, we’ve created bottom navigation with 5 tabs.

Initially, we’re setting _selectedIndex = 0, also we’re creating List _pages = [] to keep all pages.

  • In this example, I created a simple Center() widget with Text() widget as a page. you can create separate pages & add that.
  • when the user taps the button, we’re calling _changeTab(). so the _selectedIndex will be updated based on user input
  • Since it’s stateful widget, whenever _selectedIndex updates, _page[_selectedIndex] shows the respective pages
  • We’ve passed a data for selectedItemColor and unselectedItemColor to change the icon & text colors of bottom navigation

How to remove title/label from bottom navigation?

If you want to remote title/label from a bottom navigation bar, you can simply add these property into BottomNavigationBar

showSelectedLabels: false,
showUnselectedLabels: false,
Flutter Bottom Navigation by Sabeel

How to change the background color for BottomNavigationBar in flutter?

bottomNavigationBar: Theme(
data: ThemeData(
canvasColor: Colors.black,
),
child: BottomNavigationBar(
currentIndex: _selectedTab,
onTap: (index) => _changeTab(index),
selectedItemColor: Colors.red,
unselectedItemColor: Colors.grey,
showSelectedLabels: false,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.person), label: "About"),
BottomNavigationBarItem(
icon: Icon(Icons.grid_3x3_outlined), label: "Product"),
BottomNavigationBarItem(
icon: Icon(Icons.contact_mail), label: "Contact"),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: "Settings"),
],
),
),
Flutter Bottom Navigation by Sabeel

Documentation:

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

--

--

Muhammad Sabeel Ahmed
Muhammad Sabeel Ahmed

Written by Muhammad Sabeel Ahmed

Experienced in developing Mobile Applications and various scalable solutions capable of handling millions of users.