3 Ways to Implement Bottom Navigation in Flutter [2023]

Introduction

Efficient navigation is the backbone of a user-friendly Flutter app, and a bottom navigation bar is a popular choice for achieving just that. It makes accessing various app parts easier and improves the user experience. In this tutorial, we’ll explore three swift and effective ways to implement bottom navigation in your Flutter application.

Bottom Navigation Bar In Flutter

Table of Contents

What Is A Bottom Navigation Bar?

A bottom bar, also known as a bottom navigation bar or bottom app bar, is a UI component in mobile applications typically placed at the bottom of the screen. It serves as a navigation hub, offering users quick access to essential sections of the app through labeled icons.

Bottom Navigation Bar

What will we explore in this tutorial?

We’ll delve into three methods:

  1. Using the BottomNavigationBar Widget: Leveraging Flutter’s built-in widget for a straightforward and customizable bottom navigation solution.
  2. Implementing a Custom Bottom Navigation Bar: Creating a personalized navigation bar using basic Flutter widgets for enhanced design flexibility.
  3. Using a Third-Party Package: Exploring the bottom_navy_bar package as a convenient and stylish solution to expedite bottom navigation implementation.

Now, let’s get hands-on with the code examples to enhance your Flutter app’s navigation!

1. Using the BottomNavigationBar Widget:

A bottom navigation bar may be easily integrated with Flutter thanks to the native BottomNavigationBar widget. Because it offers established styles, it can be implemented quickly and consistently.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BottomNavigationBar Example')),
        body: _getBody(_currentIndex),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }

  Widget _getBody(int index) {
    switch (index) {
      case 0:
        return Center(child: Text('Home Screen'));
      case 1:
        return Center(child: Text('Search Screen'));
      case 2:
        return Center(child: Text('Profile Screen'));
      default:
        return Container(); // Placeholder for unknown index
    }
  }
}

Output:

Using the BottomNavigationBar Widget

2. Implementing a Custom Bottom Navigation Bar

For a more personalized touch, crafting a custom bottom navigation bar using basic Flutter widgets allows complete control over design and behavior.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Bottom Navigation')),
        body: Center(child: Text('Content goes here')),
        bottomNavigationBar: CustomBottomNavigation(),
      ),
    );
  }
}

class CustomBottomNavigation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56, // Adjust the height as needed
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildNavItem(Icons.home, 'Home'),
          _buildNavItem(Icons.search, 'Search'),
          _buildNavItem(Icons.person, 'Profile'),
        ],
      ),
    );
  }

  Widget _buildNavItem(IconData icon, String label) {
    return GestureDetector(
      onTap: () {
        // Implement navigation logic based on the selected item
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, color: Colors.white),
          Text(label, style: TextStyle(color: Colors.white)),
        ],
      ),
    );
  }
}

You have to now add your own logic to navigate to the places in the ontap gesture section.

Output:

Custom Navigation Bar

3. Using bottom_navy_bar package Package:

Leveraging Flutter’s package ecosystem, we’ll explore the bottom_navy_bar package for a stylish and feature-rich bottom navigation solution.

How to Install bottom_navy_bar package:

Installing a custom package in a Flutter project involves a few simple steps. Let’s assume you want to install the bottom_navy_bar package mentioned earlier. Here’s a step-by-step guide:

  1. Open pubspec.yaml File: Open your project’s pubspec.yaml file. This file is located at the root of your Flutter project.
  2. Add Dependency: Inside the dependencies section of pubspec.yaml, add the custom package along with its version. In this case, we’re adding the bottom_navy_bar package:
dependencies:
  flutter:
    sdk: flutter
  bottom_navy_bar: ^6.0.0

Make sure to check the latest version on pub.dev and update the version accordingly.

3. Save File: Save the pubspec.yaml file.

Now, you have successfully installed the bottom_navy_bar package in your Flutter project. You can utilize its features by following the package’s documentation and integrating it into your app as demonstrated in the provided example.

Output:

Using the bottom_navy_bar Package

Feel free to replace the Center(child: Text('...')) with the actual content/widgets you want to display for each screen.

Conclusion:

A crucial first step in developing an application that customers find both useful and aesthetically pleasing in Flutter is to incorporate a bottom navigation bar. Using a third-party package, designing your own, or using Flutter’s built-in widget, these approaches provide flexible ways to meet your project’s unique needs. Take the strategy that best suits your design philosophies and user experience objectives to improve the navigation of your Flutter app!

Related Posts