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.

Practice

1. What is the main purpose of a BottomNavigationBar in a Flutter app?

easy

A. To let users switch between main sections of the app easily

B. To display a list of items vertically

C. To show a popup menu on tap

D. To create a floating action button

Solution

1. Step 1: Understand the role of BottomNavigationBar

   The BottomNavigationBar widget is designed to help users navigate between main app sections by showing tabs at the bottom.

2. Step 2: Compare with other UI elements

   Options B, C, and D describe different widgets or behaviors not related to bottom navigation bars.

3. Final Answer:

   To let users switch between main sections of the app easily -> Option A

4. Quick Check:

   BottomNavigationBar purpose = navigation tabs [OK]

Hint: BottomNavigationBar is for main section switching [OK]

Common Mistakes:

• Confusing BottomNavigationBar with popup menus
• Thinking it creates floating buttons
• Assuming it displays vertical lists

2. Which of the following is the correct way to declare a BottomNavigationBar with two items in Flutter?

easy

A. BottomNavigationBar(buttons: [IconButton(icon: Icon(Icons.home)), IconButton(icon: Icon(Icons.search))])

B. BottomNavigationBar(children: [Icon(Icons.home), Icon(Icons.search)])

C. BottomNavigationBar(tabs: [Tab(icon: Icon(Icons.home)), Tab(icon: Icon(Icons.search))])

D. BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search')])

Solution

1. Step 1: Check the correct property for items

   The BottomNavigationBar uses the items property with a list of BottomNavigationBarItem widgets.

2. Step 2: Verify the syntax of items

   BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search')]) correctly uses items with BottomNavigationBarItem including icon and label.

3. Final Answer:

   BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search')]) -> Option D

4. Quick Check:

   Use items with BottomNavigationBarItem [OK]

Hint: Use items with BottomNavigationBarItem for tabs [OK]

Common Mistakes:

• Using children instead of items
• Using tabs or buttons properties which don't exist
• Omitting label in BottomNavigationBarItem

3. Given this Flutter code snippet, what will be the value of _selectedIndex after tapping the second tab?

int _selectedIndex = 0;

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

medium

A. 1

B. 0

C. 2

D. -1

Solution

1. Step 1: Understand onTap behavior

   The onTap callback receives the tapped tab's index and assigns it to _selectedIndex.

2. Step 2: Identify tapped tab index

   The second tab has index 1 (indexing starts at 0), so _selectedIndex becomes 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Tapped tab index = _selectedIndex = 1 [OK]

Hint: Tabs index start at 0; second tab is index 1 [OK]

Common Mistakes:

• Assuming index starts at 1
• Not updating _selectedIndex on tap
• Confusing currentIndex with tapped index

4. What is wrong with this Flutter BottomNavigationBar code snippet?

int _selectedIndex = 0;

BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
  ],
  onTap: (int index) {
    _selectedIndex = index;
  },
)

medium

A. BottomNavigationBarItem requires a title property

B. Missing currentIndex property to reflect selected tab

C. onTap callback should return a value

D. Using const keyword inside items list

Solution

1. Step 1: Check required properties for BottomNavigationBar

   The currentIndex property is needed to tell the widget which tab is active.

2. Step 2: Identify missing currentIndex usage

   Without currentIndex, the UI won't update to show the selected tab visually.

3. Final Answer:

   Missing currentIndex property to reflect selected tab -> Option B

4. Quick Check:

   currentIndex must be set for selected tab highlight [OK]

Hint: Always set currentIndex to show active tab [OK]

Common Mistakes:

• Forgetting currentIndex causes no visual update
• Thinking onTap must return a value
• Using deprecated title instead of label

5. You want to create a BottomNavigationBar with three tabs: Home, Search, and Profile. When a tab is tapped, the main content should update to show a different widget for each tab. Which approach correctly manages the state and updates the UI?

hard

A. Use a StatefulWidget but do not update _selectedIndex; just rebuild widgets conditionally

B. Use a StatelessWidget and update _selectedIndex variable directly inside onTap without setState

C. Use a StatefulWidget with an int _selectedIndex state; update _selectedIndex in onTap; use _selectedIndex to show different widgets in build method

D. Use a StatefulWidget and update _selectedIndex in onTap but do not call setState

Solution

1. Step 1: Understand state management for BottomNavigationBar

   To update UI on tab tap, you must store selected tab index in state and update it properly.

2. Step 2: Use StatefulWidget and setState to update UI

   Use a StatefulWidget with an int _selectedIndex state; update _selectedIndex in onTap; use _selectedIndex to show different widgets in build method correctly uses StatefulWidget, updates _selectedIndex inside onTap, and calls setState to rebuild UI with new content.

3. Final Answer:

   Use a StatefulWidget with an int _selectedIndex state; update _selectedIndex in onTap; use _selectedIndex to show different widgets in build method -> Option C

4. Quick Check:

   StatefulWidget + setState + _selectedIndex update = correct [OK]

Hint: Use StatefulWidget and setState to update selected tab [OK]

Common Mistakes:

• Using StatelessWidget and expecting UI to update
• Not calling setState after changing _selectedIndex
• Updating _selectedIndex without rebuilding UI