Flutter: BottomNavigationBar Usage

BottomNavigationBar is a navigation structure that works like tabs but is positioned at the bottom of the page. Unlike tabs, it is not responsive to swipe gestures and only works with taps.

Live Demo

You can try this widget in the interactive example below:

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

Basic Usage

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

Important Properties

Property	Description
currentIndex	Selected item index
onTap	Tap callback
items	List of BottomNavigationBarItem
type	fixed or shifting
selectedItemColor	Selected item color
unselectedItemColor	Unselected item color
showUnselectedLabels	Show unselected labels
backgroundColor	Background color

Type Options

// Fixed: All items equal width
BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  ...
)

// Shifting: Selected item grows, animated
BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  ...
)

Active and Inactive Icons

BottomNavigationBarItem(
  icon: Icon(Icons.home_outlined),      // Inactive icon
  activeIcon: Icon(Icons.home_filled),  // Active icon
  label: 'Home',
)

Preserving Page State with IndexedStack

To preserve state when page changes:

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

Adding Badge

BottomNavigationBarItem(
  icon: Badge(
    label: Text('3'),
    child: Icon(Icons.notifications),
  ),
  label: 'Notifications',
)

NavigationBar (Material 3)

New navigation widget for Material 3:

NavigationBar(
  selectedIndex: _selectedIndex,
  onDestinationSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  destinations: [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      selectedIcon: Icon(Icons.home),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
  ],
)

Summary

• BottomNavigationBar: Bottom navigation bar
• currentIndex: Active page index
• onTap: Page change callback
• type: fixed or shifting appearance
• IndexedStack: Preserves page state

BottomNavigationBar is the standard for main navigation in mobile apps.