BottomNavigationBar Tutorial in Dart

Creating a smooth and user-friendly navigation experience is essential in modern mobile apps. One of the most used UI components in Flutter is the BottomNavigationBar. This tutorial will walk you through everything you need to know to build a BottomNavigationBar in Dart, from setting up to handling navigation events.

Whether you’re building a multi-tabbed application or just need a compact way to switch between views, this guide will help you implement a clean and responsive bottom navigation layout.

Why use BottomNavigationBar?

• It’s ideal for apps with 3–5 top-level destinations
• Clean and intuitive for users
• Easy to integrate with StatefulWidget

Let’s dive into the implementation.

Full Example Code in Dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavExample(),
    );
  }
}

class BottomNavExample extends StatefulWidget {
  @override
  _BottomNavExampleState createState() => _BottomNavExampleState();
}

class _BottomNavExampleState extends State<BottomNavExample> {
  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 Scaffold(
      appBar: AppBar(title: Text('BottomNavigationBar Demo')),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

This example uses a StatefulWidget to update the UI dynamically based on the selected tab. You can extend it by adding actual page widgets, icons, or even badges.

For additional customization, such as using BottomNavigationBarType.shifting, check the official Flutter documentation.