Bottom navigation bar in Flutter

Introduction

A bottom navigation bar helps users switch between main sections of an app quickly. It stays at the bottom of the screen for easy access.

When your app has 3 to 5 main pages or sections.

When you want users to switch between pages without going back.

When you want a simple and clear way to navigate your app.

When you want to keep navigation visible on all main screens.

Syntax

Flutter

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
  currentIndex: selectedIndex,
  onTap: (int index) {
    setState(() {
      selectedIndex = index;
    });
  },
)

items is a list of buttons shown in the bar.

currentIndex shows which item is active.

onTap handles taps to change the active item.

Examples

A simple bottom bar with two items: Home and Settings.

Flutter

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
  currentIndex: 0,
  onTap: (index) {},
)

Bottom bar with three items and custom colors for selected and unselected icons.

Flutter

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
    BottomNavigationBarItem(icon: Icon(Icons.notifications), label: 'Alerts'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
  ],
  currentIndex: selectedIndex,
  onTap: (index) {
    setState(() {
      selectedIndex = index;
    });
  },
  backgroundColor: Colors.blueGrey,
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.grey,
)

Sample App

This app shows a bottom navigation bar with three tabs: Home, Search, and Profile. Tapping each tab changes the main content area to show the selected page's name.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  static const List<Widget> _pages = <Widget>[
    Center(child: Text('Home Page', style: TextStyle(fontSize: 24))),
    Center(child: Text('Search Page', style: TextStyle(fontSize: 24))),
    Center(child: Text('Profile Page', style: TextStyle(fontSize: 24))),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Bottom Navigation Bar Example')),
        body: _pages[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.blue,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

Important Notes

Keep the number of items between 3 and 5 for best usability.

Use clear icons and labels so users understand each tab.

Remember to update the currentIndex when a tab is tapped to show the active page.

Summary

Bottom navigation bars help users switch main app sections easily.

Use BottomNavigationBar widget with items, currentIndex, and onTap.

Update the selected index state to change the active tab and content.