Implementing BottomNavigationBar for Tabbed Navigation in Flutter

Introduction

Flutter bottom navigation enables smooth, intuitive tabbed navigation at the bottom of your mobile app. By using the built-in BottomNavigationBar widget, you can switch between multiple pages while maintaining state across tabs. In this tutorial, you’ll learn how to implement a simple three-tab setup with custom icons and labels, manage state for selected tabs, and use basic Dart code to wire everything up.

Setup Flutter Project

Before you begin, ensure Flutter SDK is installed and your editor is configured.

1. Create a new project:

   flutter create bottom_nav_demo  
   cd bottom_nav_demo
   
   

2. Open lib/main.dart and remove the default counter code.

3. Add any required assets (icons) or use Material icons.

Creating Screens

Define three simple widgets for each tab. Keep them stateless or stateful as needed.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home', style: TextStyle(fontSize: 24)));
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search', style: TextStyle(fontSize: 24)));
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile', style: TextStyle(fontSize: 24)));
  }
}

Save these in lib/screens/ or in the same file for simplicity.

Implementing BottomNavigationBar

Now integrate the BottomNavigationBar inside a StatefulWidget to manage the active tab index.

class MainNavigation extends StatefulWidget {
  @override
  _MainNavigationState createState() => _MainNavigationState();
}

class _MainNavigationState extends State<MainNavigation> {
  int _currentIndex = 0;
  final List<Widget> _tabs = [HomeScreen(), SearchScreen(), ProfileScreen()];

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

In main(), use MainNavigation as your home widget:

void main() => runApp(MaterialApp(home: MainNavigation()));

Customizing Appearance

Flutter bottom navigation supports various properties for customization:

• type: fixed (for 3–5 items) or shifting for dynamic colors.

• selectedItemColor and unselectedItemColor.

• backgroundColor to match your brand style.

• iconSize to adjust icon emphasis.

Example:

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  backgroundColor: Colors.white,
  selectedItemColor: Colors.blueAccent,
  unselectedItemColor: Colors.grey,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      backgroundColor: Colors.white,
      label: 'Home'),
    // Other items...
  ],
),

Managing State and Performance

Each tab rebuilds its widget when selected. To preserve state (e.g., scroll position), consider using IndexedStack:

body: IndexedStack(
  index: _currentIndex,
  children: _tabs,
),

IndexedStack keeps all children alive, ensuring stateful widgets like lists or forms retain their state when you switch tabs. This approach avoids re-fetching data on every tab change and provides a smoother user experience.

Accessibility and Best Practices

• Provide semantic labels using tooltip.

• Ensure sufficient color contrast for selected and unselected states.

• Use descriptive labels and icons to improve usability.

• Test on different device sizes to confirm responsiveness.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Implementing Flutter bottom navigation is straightforward yet powerful. You’ve learned to set up a new Flutter project, create basic screens, integrate BottomNavigationBar with state management, customize its appearance, and preserve tab state with IndexedStack. These building blocks prepare you for more complex navigation flows and dynamic tab content.