Flutter Bottom Navigation Example

In this article, I’m going to share a complete guide to flutter bottom navigation with an example. you can also check other articles on flutter tutorials & flutter master course

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

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,

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"),
          ],
        ),
      ),

Documentation:

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