In today’s tutorial, I’m going to show you how to work with a bottom navigation bar in a Flutter application. By the end of this tutorial, you’ll have a better understanding of how to create and manage a bottom navigation bar to navigate between different pages such as the home page, profile page, and settings page. Let’s get started!

If you prefer watching a video tutorial here is a link to that.

Overview

We’ll implement a bottom navigation bar that allows users to switch between multiple pages in a Flutter application. This involves setting up the navigation bar, defining the pages, and managing the state to handle page transitions.

Prerequisites

Before starting, ensure you have:

• Flutter installed
• Basic knowledge of Flutter and Dart

Setting Up the Project

Step 1: Create the Main Application File

First, set up your main application file main.dart. This file initializes the app and sets up the main structure.

import 'package:bottom_navigation_bar_tutorial/pages/main_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MainPage(),
    );
  }
}

Creating the Pages

Next, we will create the pages that will be displayed when navigating through the bottom navigation bar.

Step 2: Home Page

Create a file home_page.dart for the home page.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: const Center(
        child: Text("Home"),
      ),
    );
  }
}

Step 3: Profile Page

Create a file profile_page.dart for the profile page.

import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: const Center(
        child: Text("Profile"),
      ),
    );
  }
}

Step 4: Settings Page

Create a file settings_page.dart for the settings page.

import 'package:flutter/material.dart';

class SettingsPage extends StatelessWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: const Center(
        child: Text("Settings"),
      ),
    );
  }
}

Implementing the Bottom Navigation Bar

Now, let’s set up the main page that will include the bottom navigation bar and handle navigation between the pages.

Step 5: Main Page Setup

Create a file main_page.dart for the main page.

Importing Dependencies

Start by importing the necessary dependencies:

import 'package:bottom_navigation_bar_tutorial/pages/home_page.dart';
import 'package:bottom_navigation_bar_tutorial/pages/profile_page.dart';
import 'package:bottom_navigation_bar_tutorial/pages/settings_page.dart';
import 'package:flutter/material.dart';

Creating the Main Page Stateful Widget

Define the MainPage stateful widget:

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

Managing State and Pages

In the _MainPageState class, define the list of pages and the current page index:

class _MainPageState extends State<MainPage> {
  final List<Widget> pages = [
    const HomePage(),
    const ProfilePage(),
    const SettingsPage(),
  ];

  int currentPage = 0;

Building the Scaffold and Bottom Navigation Bar

In the build method, set up the scaffold and the bottom navigation bar:

  @override
Widget build(BuildContext context) {
  return Scaffold(
    body: pages[currentPage],
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: currentPage,
      onTap: (value) {
        setState(() {
          currentPage = value;
        });
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: "Home",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: "Profile",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings),
          label: "Settings",
        ),
      ],
    ),
  );
}

Detailed Explanation

Setting Up the Main App Structure

In main.dart, we set up the basic structure of our Flutter application by creating a MyApp widget that returns a MaterialApp. The home of this MaterialApp is set to MainPage.

Creating Individual Pages

We created three pages (HomePage, ProfilePage, and SettingsPage), each represented by a simple stateless widget with a distinct background color and centered text. We stored these pages in separate files for better organization

Implementing the Bottom Navigation Bar

In main_page.dart, we define a stateful widget MainPage which holds the logic for the bottom navigation bar.

• State Management: The MainPage widget maintains a list of pages and an integer currentPage to keep track of the currently selected page.
• Bottom Navigation Bar: The BottomNavigationBar widget is used to create the navigation bar. It includes three items, each with an icon and label.
• Handling Navigation: The onTap function updates the currentPage variable whenever a navigation item is tapped, and setState is called to rebuild the widget with the updated page.

Running the Application

With everything set up, run your application using flutter run. You should see the bottom navigation bar with three items: Home, Profile, and Settings. Tapping on each item will switch to the corresponding page.

flutter run

Get Source Code for free:

Conclusion

In this tutorial, we learned how to implement a bottom navigation bar in a Flutter application. We set up navigation between three different pages (Home, Profile, and Settings) and managed the state to handle page transitions. This approach provides a clean and efficient way to navigate through different sections of your app using a bottom navigation bar.

Happy coding!