BottomNavigationBar class

A material widget displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit.

A bottom navigation bar is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument.

The bottom navigation bar's type changes how its items are displayed. If not specified it's automatically set to BottomNavigationBarType.fixed when there are less than four items, BottomNavigationBarType.shifting otherwise.

Sample Code

This example shows a BottomNavigationBar as it is used within a Scaffold widget. The BottomNavigationBar has three BottomNavigationBarItem widgets and the currentIndex is set to index 1. The color of the selected item is set to a purple color. A function is called whenever any item is tapped and the function helps display the appropriate Text in the body of the Scaffold.

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

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 1;
  final _widgetOptions = [
    Text('Index 0: Home'),
    Text('Index 1: Business'),
    Text('Index 2: School'),

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar Sample'),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(, title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(, title: Text('School')),
        currentIndex: _selectedIndex,
        fixedColor: Colors.deepPurple,
        onTap: _onItemTapped,

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

See also:



BottomNavigationBar({Key key, @required List<BottomNavigationBarItem> items, ValueChanged<int> onTap, int currentIndex: 0, BottomNavigationBarType type, Color fixedColor, double iconSize: 24.0 })
Creates a bottom navigation bar, typically used in a Scaffold where it is provided as the Scaffold.bottomNavigationBar argument. [...]


currentIndex int
The index into items of the current active item.
fixedColor Color
The color of the selected item when bottom navigation bar is BottomNavigationBarType.fixed. [...]
iconSize double
The size of all of the BottomNavigationBarItem icons. [...]
items List<BottomNavigationBarItem>
The interactive items laid out within the bottom navigation bar where each item has an icon and title.
onTap ValueChanged<int>
The callback that is called when a item is tapped. [...]
type BottomNavigationBarType
Defines the layout and behavior of a BottomNavigationBar. [...]
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited


createState() → _BottomNavigationBarState
Creates the mutable state for this widget at a given location in the tree. [...]
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(dynamic other) bool
The equality operator. [...]