Flutter: BottomNavigationBar vs NavigationBar

Flutter offers two strong options for bottom navigation: the classic BottomNavigationBar and the Material 3 NavigationBar. They solve the same problem, but they feel different in design and behavior.

Live Demo

You can try the bottom navigation example in the interactive demo below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Which One Should You Use?

• BottomNavigationBar: A solid choice for classic mobile apps.
• NavigationBar: A more modern fit for Material 3 design.

This article targets searches like "flutter bottomnavigationbar vs navigationbar" and "material 3 navigation flutter".

Why BottomNavigationBar Is Still Used

Many existing apps are built around the classic pattern. It also supports fixed and shifting styles, which makes it flexible.

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

What NavigationBar Changes

With Material 3, bottom navigation becomes softer, wider, and visually more modern. The selected state and icon treatment feel more current.

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (value) => setState(() => index = value),
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home_outlined), selectedIcon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
  ],
)

Design Difference

BottomNavigationBar can feel denser and more compact. NavigationBar feels airier and more aligned with Material 3.

Preserving State

No matter which widget you choose, IndexedStack is often the best way to keep page state when switching tabs.

body: IndexedStack(
  index: index,
  children: const [HomePage(), SearchPage()],
)

Navigation Architecture

The real decision is not only the widget. You also need to make sure tab changes do not reset the state of each page.

Frequently Asked Questions

Do I have to use NavigationBar if I use Material 3?

No, but it fits the design language better.

Is BottomNavigationBar outdated?

No. It is still valid, just more classic in appearance.

Why is IndexedStack important?

It prevents page state from resetting when the user switches tabs.

Summary

BottomNavigationBar and NavigationBar solve the same problem with different design languages. Your app's visual style and Material version should guide the choice.