Enable Dark Mode!
how-to-create-bottom-bar-navigation-in-flutter.jpg
By: Swaroop N P

How to Create Bottom Bar Navigation in Flutter

Flutter is a versatile and powerful framework for building cross-platform applications. It provides a straightforward way to implement bottom bar navigation using the BottomNavigationBar widget. Let's explore the process in detail.
Step 1: Setting up the Project
To begin, make sure you have Flutter installed on your system. If not, follow the instructions provided on the official Flutter website to set it up. Once you have flutter installed, use the following command in your terminal to create a new flutter project:
flutter create bottom_bar_navigation
Step 2: Implementing the Bottom Bar Navigation
After setting up the project, open the main Dart file for your application. In the provided example, we have created a basic Flutter application that demonstrates a bottom bar navigation with three tabs: Home, Search, and Profile. Let's break down the key components of the code.
// Importing the necessary packages
import 'package:flutter/material.dart';
// The main function that runs the application
void main () = > runApp (MyApp ());
// The root widget of the application
class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp (
      home: MyBottomNavigationBar (),
    );
  }
}
// StatefulWidget for the bottom bar navigation
class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState () = > _MyBottomNavigationBarState ();
}
// State class for the bottom bar navigation
class _MyBottomNavigationBarState extends State< MyBottomNavigationBar> {
  // index for tracking the current active tab
  int _selectedIndex = 0;
  // Widgets to be displayed for each tab
  static List < Widget> _widgetOptions = < Widget> [
    Text ('Home Page', style: TextStyle (fontSize: 35, fontWeight: FontWeight.bold)),
    Text ('Search Page', style: TextStyle (fontSize: 35, fontWeight: FontWeight.bold)),
    Text ('Profile Page', style: TextStyle (fontSize: 35, fontWeight: FontWeight.bold)),
  ];
  // Function for handling tap events on the bottom navigation bar
  void _onItemTapped (int index) {
    setState (() {
      _selectedIndex = index;
    });
  }
  // Building the UI for the bottom bar navigation
  @override
  Widget build (BuildContext context) {
    return Scaffold
      appBar: AppBar (
        title: Text ('Bottom Navigation Bar Example'),
      ),
      body: center
        child: _widgetOptions.elementAt (_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar (
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem
            icon: Icon (Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem
            icon: Icon (Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem
            icon: Icon (Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        sealedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

Step 3: Running the Application

After implementing the code, you can run the application using the following command:

flutter run
If we want to run it specifically on Chrome, we can use the following command.
flutter run -d chrome
Bottom bar navigation is a crucial component in mobile application development, enabling users to navigate between different sections of an app with ease. Flutter's BottomNavigationBar widget simplifies the process of creating a user-friendly and intuitive navigation system.
In this blog, we have learned how to set up a basic flutter project and implement a bottom bar navigation with three tabs. You can customize the appearance and behavior of the bottom bar according to your application's requirements by modifying the provided code.
To read more about How to Implement a Rating Bar in Flutter, refer to our blog How to Implement Rating Bar in Flutter.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message