Display Bottom Navigation Bar in Flutter

A bottom navigation bar is a menu bar that displayed at the bottom of the screen. Typically navigation bar consists of three to five items. Each item can have an icon and an optional text label. When an item is selected, then the top-level view is displayed associated with that item.

A bottom navigation bar can be created using BottomNavigationBar class. A navigation bar consists of items. Each item is defined by BottomNavigationBarItem. The onTap callback is called when user selected item of the bar.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final List<Widget> _widgets = <Widget>[
    const Text('Account'),
    const Text('Call'),
    const Text('Camera'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bottom navigation bar')),
      body: Center(
        child: _widgets[_selectedIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.lightGreen,
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Account',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Call',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera_alt),
            label: 'Camera',
          ),
        ],
      ),
    );
  }
}