BottomNavigationBar class

A material widget that's 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, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.

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 0. The selected item is amber. The _onItemTapped function changes the selected item's index and displays a corresponding message in the center of the Scaffold.

A scaffold with a bottom navigation bar containing three bottom navigation
bar items. The first one is selected.

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

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

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

See also:

Inheritance

Constructors

BottomNavigationBar({Key key, @required List<BottomNavigationBarItem> items, ValueChanged<int> onTap, int currentIndex: 0, double elevation: 8.0, BottomNavigationBarType type, Color fixedColor, Color backgroundColor, double iconSize: 24.0, Color selectedItemColor, Color unselectedItemColor, IconThemeData selectedIconTheme: const IconThemeData(), IconThemeData unselectedIconTheme: const IconThemeData(), double selectedFontSize: 14.0, double unselectedFontSize: 12.0, TextStyle selectedLabelStyle, TextStyle unselectedLabelStyle, bool showSelectedLabels: true, bool showUnselectedLabels })
Creates a bottom navigation bar which is typically used as a Scaffold's Scaffold.bottomNavigationBar argument. [...]

Properties

backgroundColor Color
The color of the BottomNavigationBar itself. [...]
final
currentIndex int
The index into items for the current active BottomNavigationBarItem.
final
elevation double
The z-coordinate of this BottomNavigationBar. [...]
final
fixedColor Color
The value of selectedItemColor. [...]
read-only
iconSize double
The size of all of the BottomNavigationBarItem icons. [...]
final
items List<BottomNavigationBarItem>
Defines the appearance of the button items that are arrayed within the bottom navigation bar.
final
onTap ValueChanged<int>
Called when one of the items is tapped. [...]
final
selectedFontSize double
The font size of the BottomNavigationBarItem labels when they are selected. [...]
final
selectedIconTheme IconThemeData
The size, opacity, and color of the icon in the currently selected BottomNavigationBarItem.icon. [...]
final
selectedItemColor Color
The color of the selected BottomNavigationBarItem.icon and BottomNavigationBarItem.label. [...]
final
selectedLabelStyle TextStyle
The TextStyle of the BottomNavigationBarItem labels when they are selected.
final
showSelectedLabels bool
Whether the labels are shown for the unselected BottomNavigationBarItems.
final
showUnselectedLabels bool
Whether the labels are shown for the selected BottomNavigationBarItem.
final
type BottomNavigationBarType
Defines the layout and behavior of a BottomNavigationBar. [...]
final
unselectedFontSize double
The font size of the BottomNavigationBarItem labels when they are not selected. [...]
final
unselectedIconTheme IconThemeData
The size, opacity, and color of the icon in the currently unselected BottomNavigationBarItem.icons [...]
final
unselectedItemColor Color
The color of the unselected BottomNavigationBarItem.icon and BottomNavigationBarItem.labels. [...]
final
unselectedLabelStyle TextStyle
The TextStyle of the BottomNavigationBarItem labels when they are not selected.
final
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

Methods

createState() → _BottomNavigationBarState
Creates the mutable state for this widget at a given location in the tree. [...]
override
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
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. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

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