How to Create a Bottom Navigation Bar in Flutter (Complete 2025 Guide)

In this blog, I will guide you step-by-step on how to create a modern Bottom Navigation Bar in Flutter applications. Here are the all tutorial related to the flutter .

Introduction:

In every modern mobile application, navigation plays a very important role in enhancing the user experience. One of the most common navigation patterns is the Bottom Navigation Bar. It helps users switch between different sections of the app quickly like Home, Profile, Settings, and more.

In this 2025 guide, we’ll show you how to create a modern, responsive, and customizable Bottom Navigation Bar in Flutter, with examples you can use directly in your own projects including apps you build for BaseProgrammer.com.

What is a Bottom Navigation Bar in Flutter ?

Developers can show navigation items at the bottom of the screen with Flutter’s BottomNavigationBar widget. Each item, like “Home,” “Search,” “Notifications,” or “Profile,” may stand in for a page.

Building stunning bottom navigation bars with fluid animations and icons is incredibly simple with Flutter, and new Material 3 updates in 2025 give them an even sleeker, more contemporary appearance.

How to Create a Simple Bottom Navigation Bar

Let’s start with a simple example:

import 'package:flutter/material.dart';

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

class BaseProgrammerApp extends StatefulWidget {
  @override
  _BaseProgrammerAppState createState() => _BaseProgrammerAppState();
}

class _BaseProgrammerAppState extends State<BaseProgrammerApp> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Explore Page')),
    Center(child: Text('Profile Page')),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BaseProgrammer Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('BaseProgrammer Navigation'),
          backgroundColor: Colors.blueAccent,
        ),
        body: _pages[_selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.explore), label: 'Explore'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.blueAccent,
          unselectedItemColor: Colors.grey,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

Explanation:

• _selectedIndex stores the index of the current tab.
• _pages holds the widgets for each screen.
• BottomNavigationBar creates the navigation bar and handles tap events.

Adding Custom Styles (Material 3 Look)

You can upgrade your navigation bar using Flutter’s Material 3 (M3) design updates:

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

This new NavigationBar widget (introduced in newer Flutter versions) gives your app a sleek, minimal look and works great with dark and light themes.

Best Practices for Bottom Navigation Bar in 2025

• Keep 3–5 navigation items max for clarity.
• Use meaningful icons and short labels.
• Use NavigationBar instead of BottomNavigationBar for modern Material 3 apps.
• Keep the selected tab state consistent across pages using GetX or Provider if needed.
• Animate transitions between pages for a smooth UX.

At BaseProgrammer.com:

At BaseProgrammer, we use Bottom Navigation Bar in flutter to make apps user-friendly and structured. Whether it’s a blog app, an eCommerce dashboard, or a tourism guide like our Ayodhya Darshan project, a clean navigation bar improves engagement and retention.

In 2025, Flutter’s UI flexibility makes it possible to create professional-grade designs with just a few lines of code.

FAQs of Bottom Navigation Bar in Flutter

1. Can I use images or custom icons in a Flutter Bottom Navigation Bar?
Yes! You can use Image.asset() instead of Icon() or use SVG icons with the flutter_svg package for more customization.

2. What’s the difference between BottomNavigationBar and NavigationBar?
NavigationBar is the newer Material 3 widget introduced for better design consistency and theming options, replacing the older BottomNavigationBar.

3. How do I change the color of the selected icon?
Use the selectedItemColor property for BottomNavigationBar or the theme property for NavigationBar.

4. Can I add animation to page transitions?
Yes! You can use PageView, AnimatedSwitcher, or GetX for smooth animated transitions when switching tabs.

5. How can I keep the Bottom Navigation Bar persistent across pages?
Wrap your navigation structure inside a Scaffold with IndexedStack or use state management tools like GetX to maintain state between pages.

Conclusion:

Creating a Bottom Navigation Bar in Flutter 2025 is simpler and more powerful than ever. With tools like Material 3’s NavigationBar, you can build stunning, user-friendly apps with minimal effort.

So, whether you’re building your next big app or contributing to BaseProgrammer.com, don’t forget — good navigation = happy users.