The BottonNavigationBar widget is used to show the bottom of an app. It consist of multiple items such as icons, texts or labels, or both, that leads to a different route depending upon the design of the application. It is meant to help the user navigate to different sections of the application in general.
Constructor
BottomNavigationBar BottomNavigationBar({
Key? key,
required List<BottomNavigationBarItem> items,
void Function(int)? onTap,
int currentIndex = 0,
double? elevation,
BottomNavigationBarType? type,
Color? fixedColor,
Color? backgroundColor,
double iconSize = 24.0,
Color? selectedItemColor,
Color? unselectedItemColor,
IconThemeData? selectedIconTheme,
IconThemeData? unselectedIconTheme,
double selectedFontSize = 14.0,
double unselectedFontSize = 12.0,
TextStyle? selectedLabelStyle,
TextStyle? unselectedLabelStyle,
bool? showSelectedLabels,
bool? showUnselectedLabels,
MouseCursor? mouseCursor,
bool? enableFeedback,
BottomNavigationBarLandscapeLayout? landscapeLayout,
bool useLegacyColorScheme = true,
})
Properties
Properties | Description |
|---|---|
key | Controls how one widget replaces another widget in the tree. |
backgrounColor | The color of the BottomNavigationBar itself. |
elevation | The z-coordinate of this BottomNavigationBar. |
fixedColor | it defines the selected Item Color in bottom navigation bar. |
items | Defines the appearance of the button items that are arrayed within the bottom navigation bar. |
onTap | Called when one of the items is tapped. |
currentIndex | it takes an int value as the object to determine the current index of BottomNavigationBarItem list. |
iconSize | It takes a double value as the object to determine the size of all the icons in the BottomNavigationBar. |
mouseCursor | The mouseCursor property takes MouseCursor class as the object. It determines the type of cursor this widget will have when you hovering on bottom navigation bar. |
selectedFontSize | This property controls the font size in the BottomNavigationBar when the items are selected. It takes a double value as the object. |
selectedIcontheme | This property holds IconThemeData class as the object to controls the appearance of the icons like size, color, opacity when it is selected. |
selectedItemColor | This property determines the color of the icons and label when they are selected. This property takes Color class as the property. |
selectedLabelStyle | TextStyle class is the object assigned to this property which controls the text style when they are selected. |
showSelectedLabels | This property takes a boolean value as the object to determine whether the labels for the selected item will be shown or not. |
showUnselectedLabels | This property also takes in a boolean value as the object to determine whether the labels for unselected items will be shown or not. |
type | The type property controls the behaviour and the layout of the BottomNavigationBar. It takes BottomNavigationBarType enum as the object. |
unselectedFontSize | This property also takes a double value as an object to determine the size of label when the item is not selected. |
unselectedIconTheme | This property also holds IconThemeData class as the object to controls the appearance of the icons like size, color, opacity when it is unselected or not selected. |
unselectedItemColor | This property determines the color the icons and label when they are unselected. This property takes Color class as the property. |
unselectedLabelStyle | TextStyle class is the object assigned to this property which controls the text style when the item is unselected. |
Example of BottomNavigationBar Widget in Flutter
Below is the implementation of BottomNavigationBar:
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(const MyApp());
// Main application widget
class MyApp extends StatelessWidget {
static const String _title = 'Flutter BottomNavigationBar';
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
// Stateful widget to manage the
// state of the BottomNavigationBar
class MyStatefulWidget extends StatefulWidget
{
const MyStatefulWidget({super.key});
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
// Index to keep track of the selected tab
int _selectedIndex = 0;
// TextStyle for the text displayed in each tab
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
// List of widgets to display in each tab
static const List<Widget> _widgetOptions = <Widget>[
Text(
'HOME PAGE',
style: optionStyle,
),
Text(
'COURSE PAGE',
style: optionStyle,
),
Text(
'CONTACT GFG',
style: optionStyle,
),
];
// Method to handle tab selection
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'GeeksForGeeks',
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: Colors.green,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark),
label: 'Courses',
),
BottomNavigationBarItem(
icon: Icon(Icons.contact_mail),
label: 'Mail',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
Output:
Explanation of the above Program:
- First, create the stateless main widget.
- Second use the stateful widget to create an appbar, bottomNavigationBar inside the scaffold.
- Third use the ButtomNavigationBar widget in the Scaffold.
- Do not forget to use setstate to change the current indexes of bottomNavigationBar.
