BottomNavigationBar Widget in Flutter (original) (raw)

Last Updated : 28 Feb, 2025

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

Syntax `

BottomNavigationBar BottomNavigationBar({ Key? key, required List 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 itemwill 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 takesBottomNavigationBarType 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:

Dart `

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 {

// 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 _widgetOptions = [ 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( 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:

  1. First, create the stateless main widget.
  2. Second use the stateful widget to create an _appbar, bottomNavigationBar inside the _scaffold.
  3. Third use the _ButtomNavigationBar widget in the Scaffold.
  4. Do not forget to use _setstate to change the current indexes of _bottomNavigationBar.