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.