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.

Example:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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,
      ),
    );
  }
}

chevron_right


 
 

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.

 




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.