Flutter Bottom Navigation Bar

A bottom navigation bar is a common feature in many mobile applications, providing users with quick access to different parts of the application. Flutter includes a built-in BottomNavigationBar widget that makes it easy to implement this feature in your own app.

Syntax

BottomNavigationBar({
  required List<BottomNavigationBarItem> items,
  int currentIndex = 0,
  Color? backgroundColor,
  double? elevation,
  Color? fixedColor,
  bool? showSelectedLabels,
  bool? showUnselectedLabels,
  ValueChanged<int>? onTap
})

Example

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  int _currentIndex = 0;

  final tabs = [
    Center(child: Text('Home')),
    Center(child: Text('Profile')),
    Center(child: Text('Settings')),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Navigation Bar Example'),
        ),
        body: tabs[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
          ],
        ),
      ),
    );
  }
}

Output

The output of this example is a bottom navigation bar with three items: Home, Profile, and Settings. Tapping on one of the items switches to the corresponding tab.

Explanation

The BottomNavigationBar widget is used to display a horizontal row of tabs at the bottom of the screen. Each tab is represented by a BottomNavigationBarItem and can have an icon and/or a label. The currentIndex property is used to determine which tab is currently selected, and the onTap property is used to handle taps on the different tabs.

In this example, we have used a simple Scaffold widget as the main container for our app, with a bottomNavigationBar property that contains our BottomNavigationBar. The body property is used to display different content based on the currently selected tab.

Use

Bottom navigation bars can be used to provide quick and easy access to different parts of your app. They are commonly used to navigate between different views, screens, or sections of an app.

Important Points

• Bottom navigation bars should be used sparingly, as they take up valuable screen real estate and can be overwhelming for users if there are too many options.
• The currentIndex and onTap properties should be used together to keep track of the currently selected tab and to handle tab changes.
• The BottomNavigationBar widget also includes properties for customizing the appearance of the bar, such as fixedColor, backgroundColor, and elevation.

Summary

Bottom navigation bars are a common feature in mobile applications and Flutter makes it easy to implement them using the built-in BottomNavigationBar widget. This widget can be customized to display different tabs with icons and/or labels and to respond to user input. When used appropriately, bottom navigation bars can provide quick and easy access to different parts of your app.