How to Create Bottom Navigation in Flutter: Simple Guide

To create bottom navigation in Flutter, use the BottomNavigationBar widget inside a Scaffold. Define items for each tab and manage the selected index with state to switch views.

Syntax

The BottomNavigationBar widget requires a list of BottomNavigationBarItem objects for each tab. You control the selected tab with the currentIndex property and handle taps using onTap.

• items: List of tabs with icons and labels.
• currentIndex: The active tab index.
• onTap: Callback to update the selected tab.

dart

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

Example

This example shows a simple Flutter app with a bottom navigation bar that switches between three pages: Home, Search, and Profile.

dart

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: const Text('Bottom Navigation 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,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

Output

A Flutter app with a top app bar titled 'Bottom Navigation Example' and a bottom navigation bar with three tabs: Home, Search, and Profile. Tapping each tab changes the main content area to show the corresponding page text.

Common Pitfalls

Common mistakes when creating bottom navigation in Flutter include:

• Not managing the selected index state, so taps don't update the UI.
• Using BottomNavigationBar without wrapping in a Scaffold, causing layout issues.
• Forgetting to provide unique icons and labels for each tab.
• Not updating the currentIndex property, so the selected tab does not highlight.

dart

/* Wrong: Missing state update, taps do nothing */
BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
  currentIndex: 0,
  onTap: (index) {
    // No setState called, UI won't update
  },
)

/* Right: Update state on tap */
int _selectedIndex = 0;

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

Quick Reference

Summary tips for bottom navigation in Flutter:

• Use BottomNavigationBar inside Scaffold.
• Provide at least two BottomNavigationBarItem with icons and labels.
• Manage the selected tab index with state and update it on tap.
• Use currentIndex to highlight the active tab.
• Keep the UI responsive by updating the body content based on the selected index.

Key Takeaways

Use BottomNavigationBar inside Scaffold to create bottom navigation.

Manage selected tab index with state and update it on tap.

Provide icons and labels for each BottomNavigationBarItem.

Always update currentIndex to highlight the active tab.

Wrap BottomNavigationBar with Scaffold to avoid layout issues.