BottomNavigationBar Widget in Flutter

The BottonNavigationBar widget is used to show the bottom of an app. It can consist of multiple items such as icons, text, 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.

Constructors:

Syntax:
BottomNavigationBar(
{Key key, 
@required List<BottomNavigationBarItem> items, 
ValueChanged<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: true, 
bool showUnselectedLabels, 
MouseCursor mouseCursor})

Properties:

• hashCode: The hash code for this object.
• key: Controls how one widget replaces another widget in the tree.
• runtimeType: A representation of the runtime type of the object.
• backgrounColor: The color of the BottomNavigationBar itself.
• elevation: The z-coordinate of this BottomNavigationBar.
• fixedColor: The z-coordinate of this BottomNavigationBar.
• 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: This property takes an int value as the object to assign index t the items.
• fixedColor: This property takes in Color class as the object to assign a fixed value to the SelectedItemColor.
• 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.
• 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 this widget when it is selected.
• selectedIconColor: This property determines the color of the icons inside this widget will hold 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 at the instance of selection.
• showSelectedLabele: This property takes a boolean value as the object to determine whether or not the labels for the unselected item will be shown.
• showUnselectedLabels: This property also takes in a boolean value as the object to determine whether or not the labels for selected items will be shown.
• 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 e object to determine the size of font when the item is not selected.
• unselectedIconTheme: This property also holds IconThemeData class as the object to controls the appearance of the icons this widget when it is unselected or not selected.
• unselectedItemColor: This property determines the color the icons inside this widget will hold 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:

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'HOME PAGE',
      style: optionStyle,
    ),
    Text(
      'COURSE PAGE',
      style: optionStyle,
    ),
    Text(
      'CONTACT GFG',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.bookmark),
            title: Text('Courses'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contact_mail),
            title: Text('Mail'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Output:

Explanation:

1. First, create the stateless main widget.
2. Second use the widget builder to create an appbar inside the scaffold.
3. Third use the ButtomNavigationBar widget in the body of the main app
4. Do not forget to set the navbar at the bottom of the app using the style property.