BottomNavigationBar Widget

What is BottomNavigationBar Widget?

The BottomNavigationBar is to display the button items at the bottom of an app for selecting among a small number of views, typically between three and five.

Default Constructor

The default constructor creates a bottom navigation bar.

Typically used as a Scaffold's Scaffold.bottomNavigationBar argument.

BottomNavigationBar(
      items:
      currentIndex:
      selectedItemColor:
      onTap:
    );

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

Configure items parameter to show the button items that are arrayed within the bottom navigation bar.

Configure currentIndex parameter to indicate current active item.

Configure selectedItemColor parameter to apply the Color to the selected item i.e.BottomNavigationBarItem.icon and BottomNavigationBarItem.label.

Configure onTap parameter to call when one of the items is tapped.

Code snippet

The following code snippet shows how to configure BottomNavigationBar widget.

BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text('Search'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
);

Demo Code

This example shows bottom navigation bar with items on home screen.

import 'package:flutter/material.dart';

class BottomNavigationBarDemo extends StatefulWidget {
  @override
  _BottomNavigationBarDemoState createState() =>
      _BottomNavigationBarDemoState();
}

class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text('Search'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle),
          title: Text('Profile'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'BottomNavigationBar Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Text('BottomNavigationBar Example'),
        ),
        bottomNavigationBar: BottomNavigationBarDemo(),
      ),
    );
  }
}

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