Creating Bottom and Top Navigation Bars in Flutter
Tags: webdev, flutter, programming, beginners
Published: 2023-06-24 10:09:15

**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**
1. Open the `lib/main.dart` file in your IDE. This file is the entry point for your Flutter app.

2. Remove the default code inside the `MyApp` class and replace it with the following code:

```dart
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'),
    );
  }
}
```

3. 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.

4. 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.

5. 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.

6. Each screen is represented by a separate `StatelessWidget` class, which returns a centered `Text` widget displaying the name of the screen.

7. 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**
1. To add a top navigation bar, modify the `_MyHomePageState` class as follows:

```dart
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,
        ),
      ),
    );
  }
}
```

2. 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.

3. 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.

4. 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.

5. The `body` property of `Scaffold` is set to `TabBarView`, which displays the content of the selected tab.

6. 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](https://saifytech.com/offering-files/mobile-app-development/flutter-app-development) 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.