Creating Bottom and Top Navigation Bars in Flutter

Sachin patel — Sat, 24 Jun 2023 10:09:15 +0000

Introduction
Flutter is a powerful framework for building cross-platform mobile applications. It provides a wide range of widgets that can be used to create intuitive and interactive user interfaces. Two common UI elements in mobile apps are the bottom navigation bar and the top navigation bar, which allow users to navigate between different screens or sections of an app. In this tutorial, we will explore how to implement both the bottom and top navigation bars in Flutter.

Prerequisites
Before we begin, make sure you have Flutter and Dart installed on your system. You can refer to the official Flutter documentation for installation instructions.

Creating a Flutter Project
To get started, open your preferred IDE and create a new Flutter project by running the following command:

flutter create navigation_example

Once the project is created, navigate to the project directory using the command:

cd navigation_example

Implementing the Bottom Navigation Bar

Open the lib/main.dart file in your IDE. This file is the entry point for your Flutter app.
Remove the default code inside the MyApp class and replace it with the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _tabs = [
    HomeScreen(),
    FavoritesScreen(),
    ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Demo'),
      ),
      body: _tabs[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favorites',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

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

class FavoritesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Favorites Screen'),
    );
  }
}

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

In the code above, we define a MyHomePage class that extends StatefulWidget and returns a Scaffold widget. The Scaffold widget represents a basic material design layout structure. We set the appBar property to display the top navigation bar and the body property to display the content of the selected tab. The bottomNavigationBar property is set to a BottomNavigationBar widget, which allows users to switch between different tabs.
Inside the BottomNavigationBar,

we define three BottomNavigationBarItem widgets, each representing a tab item. The currentIndex property is used to track the currently selected tab, and the onTap callback updates the _currentIndex value when a tab is tapped.

The _tabs list contains the content for each tab. In this example, we have three different screens: HomeScreen, FavoritesScreen, and ProfileScreen. You can replace these with your own screens.
Each screen is represented by a separate StatelessWidget class, which returns a centered Text widget displaying the name of the screen.
Save the file and run the app using the command:

flutter run

You should now see the bottom navigation bar with three tabs at the bottom of the screen. Tapping on each tab will display the corresponding screen content.

Implementing the Top Navigation Bar

To add a top navigation bar, modify the _MyHomePageState class as follows:

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _tabs = [
    HomeScreen(),
    FavoritesScreen(),
    ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _tabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Top Navigation Demo'),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: 'Home'),
              Tab(icon: Icon(Icons.favorite), text: 'Favorites'),
              Tab(icon: Icon(Icons.person), text: 'Profile'),
            ],
          ),
        ),
        body: TabBarView(
          children: _tabs,
        ),
      ),
    );
  }
}

In the code above, we wrap the Scaffold widget with a DefaultTabController widget. The length property of DefaultTabController is set to the number of tabs (in this case, _tabs.length), which indicates the number of screens we have.
Inside the AppBar, we add a TabBar widget as the bottom property. The TabBar displays the tabs at the top of the screen and allows users to switch between them.
Each tab is represented by a Tab widget, which can have an icon and text. In this example, we set the icon and text properties for each tab.
The body property of Scaffold is set to TabBarView, which displays the content of the selected tab.
Save the file and run the app again using the command flutter run. Now you should see the top navigation bar with three tabs at the top of the screen. Tapping on each tab will display the corresponding screen content.

Conclusion
In this tutorial, we learned how to implement both the bottom and top navigation bars in Flutter. We used the BottomNavigationBar widget for the bottom navigation bar and the TabBar and TabBarView widgets for the top navigation bar. With these navigation bars, you can create dynamic and user-friendly interfaces for your Flutter applications.

Looking for expert Flutter developers? Visit our webpage at hire flutter developer to hire top-notch Flutter professionals. Our skilled developers are well-versed in Flutter app development, ensuring high-quality and efficient solutions for your projects. Take advantage of their expertise and join the thriving industry of Flutter development with confidence.

DEV Community: Sachin patel

Creating Bottom and Top Navigation Bars in Flutter