May

Flutter Bottom Navigation Bar

Flutter Bottom Navigation Bar:

In this tutorial, we are going to learn about Flutter Bottom Navigation Bar. In any app, Bottom navigation bars make it easy for users to explore and switch between top-level views or top-level pages in a single tap with a more convenient way. The Bottom navigation bars display three to five destinations at the bottom of an app screen. Each destination is represented by a unique icon and an optional text label.

Creating Flutter Bottom Navigation Bar:

Follow the below procedure to create Flutter Bottom Navigation Bar.

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
bmnav: ^0.3.4

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

We all know that, After Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:bmnav/bmnav.dart';

Creating the Flutter Bottom Navigation Bar.

In Scaffold widget, we are implementing the Bottom navigation bar code. As shown in below example code.

@override
Widget build(BuildContext ctx) {
return Scaffold(
appBar: AppBar(title: Text('iFlutter Bottom Nav Demo')),
body: Container(child: Text('Hello World')),
bottomNavigationBar: bmnav.BottomNav(
items: [
bmnav.BottomNavItem(Icons.home),
bmnav.BottomNavItem(Icons.fitness_center),
bmnav.BottomNavItem(Icons.person),
bmnav.BottomNavItem(Icons.view_headline)
],
),
);
}

Flutter Bottom Navigation Bar Properties:

Name	Explanation	Default
index	starting index	0
onTap	callback when a bottom nav item is pressed	null
items	bottom nav items	null
elevation	elevation of bottom nav	8.0
color	background color	Colors.white
iconStyle	icon styles (size, onSelectSize, color, onSelectColor)	null
labelStyle	label styles (visible, showOnSelect, textStyle, onSelectTextStyle)	null

Complete Example Code For Flutter Bottom Navigation Bar:

Copy and Paste the below code in your main.dart file

main.dart

import 'package:flutter/material.dart';
import 'package:bmnav/bmnav.dart' as bmnav;

void main() {
runApp(MaterialApp(
title: 'Bottom Nav Demo',
home: MainWidget(),
theme: ThemeData(primaryColor: Colors.green),
));
}

class MainWidget extends StatefulWidget {
@override
MainWidgetState createState() => MainWidgetState();
}

class MainWidgetState extends State {
int currentTab = 0;
final List screens = [
HomeScreen(),
WorkoutsScreen(),
AccountScreen(),
SettingsScreen()
];
Widget currentScreen = HomeScreen();

final PageStorageBucket bucket = PageStorageBucket();

@override
Widget build(BuildContext ctx) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Nav Demo', style: TextStyle(color: Colors.black)),
elevation: 2.0,
backgroundColor: Colors.white,
),
backgroundColor: Colors.white,
body: PageStorage(child: currentScreen, bucket: bucket),
bottomNavigationBar: bmnav.BottomNav(
index: currentTab,
labelStyle: bmnav.LabelStyle(visible: false),
onTap: (i) {
setState(() {
currentTab = i;
currentScreen = screens[i];
});
},
items: [
bmnav.BottomNavItem(Icons.home, label: 'Home'),
bmnav.BottomNavItem(Icons.fitness_center, label: 'Workouts'),
bmnav.BottomNavItem(Icons.person, label: 'Account'),
bmnav.BottomNavItem(Icons.view_headline, label: 'Settings')
],
),
);
}
}

// Home Screen
class HomeScreen extends StatefulWidget {
HomeScreen();
@override
HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State {
@override
Widget build(BuildContext ctx) {
return Center(
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(50.0),
child: Text('Home', style: TextStyle(color: Colors.white, fontSize: 24.0)),
),
);
}
}

// Workouts Screen
class WorkoutsScreen extends StatefulWidget {
WorkoutsScreen();
@override
WorkoutsScreenState createState() => WorkoutsScreenState();
}

class WorkoutsScreenState extends State {
@override
Widget build(BuildContext ctx) {
return Center(
child: Container(
color: Colors.red,
padding: EdgeInsets.all(50.0),
child: Text('Workouts', style: TextStyle(color: Colors.white, fontSize: 24.0)),
),
);
}
}

// Account Screen
class AccountScreen extends StatefulWidget {
AccountScreen();
@override
AccountScreenState createState() => AccountScreenState();
}

class AccountScreenState extends State {
@override
Widget build(BuildContext ctx) {
return Center(
child: Container(
color: Colors.yellow[600],
padding: EdgeInsets.all(50.0),
child: Text('Account', style: TextStyle(color: Colors.white, fontSize: 24.0)),
),
);
}
}

// Settings Screen
class SettingsScreen extends StatefulWidget {
SettingsScreen();
@override
SettingsScreenState createState() => SettingsScreenState();
}

class SettingsScreenState extends State {
@override
Widget build(BuildContext ctx) {
return Center(
child: Container(
color: Colors.green,
padding: EdgeInsets.all(50.0),
child: Text('Settings', style: TextStyle(color: Colors.white, fontSize: 24.0)),
),
);
}
}

Congratulations You Have Learned Creating Flutter Bottom Navigation Bar….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext