Flutter Bottom Navigation Bar :

Flutter Bottom Navigation Bar is used to provide a better way of navigation for user in mobile apps to easily move from one screen to another this is a part of material design.

Generally a bottom navigation bar consists of a icon or text sometimes both to make user understand the tab for which screen it will navigate on tap.

Also some times we can show some notification count on the tabs for messages, add to cart options just like food delivery apps swiggy & zomato.

We can add menu options also in flutter bottom navigation bar by providing the selected options highlighted using a dark blue color in this tutorial..

In this part of the tutorial we will see the usage of the bottom navigation bar with both text, icon and highlight the selected tab to make sure user knew on which page he is present.

Flutter Bottom Navigation Bar :

Check out the tutorial below for a more in-depth explanation

Project Structure :

This image illustrates the project structure of bottom navigation bar.

main.dart :

Let us start with the initialization of the void main() consider a default class MyApp()

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

Return a material app and provide title and a class in home tag.

MaterialApp(
  title: _title,
  home: MyStatefulWidget(),
);

Create a state for the widget declared so that we can refresh the view when you click on a option in flutter bottom navigation bar then we can rebuild the view.

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

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

Here we are creating a sample widget to display a Text in Column widget and we are aligning the text center.

Widget sampleWidget(widgetDesc) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(widgetDesc),
    ],
  );
}

Declare a BottomNavigationBar and provide the items and also we are providing the selected index value and color on tapped.

bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    // Add BottomNavigationBarItems here
  ],
  currentIndex: _selectedIndex,
  selectedItemColor: Colors.blue[800],
  onTap: _onItemTapped,
),

Add navigation items as shown in below we are adding values as Text

static List<Widget> _widgetOptions = <Widget>[
  sampleWidget('Home'),
  sampleWidget('Settings'),
  sampleWidget('Help'),
];

We are creating options like below like Home, Settings, Help

Home

BottomNavigationBarItem(
  icon: Icon(Icons.home),
  label: 'Home',
),

Settings

BottomNavigationBarItem(
  icon: Icon(Icons.settings),
  label: 'Settings',
),

Help

BottomNavigationBarItem(
  icon: Icon(Icons.help),
  label: 'Help',
),

Now we will declare onTap

onTap: _onItemTapped,

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

FullCode :

Here’s the complete code for implementing a Flutter bottom navigation bar in your application

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  static List<Widget> _widgetOptions = <Widget>[
    sampleWidget('Home'),
    sampleWidget('Settings'),
    sampleWidget('Help'),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bottom Navigation'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: _widgetOptions.elementAt(_selectedIndex),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.help),
            label: 'Help',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Widget sampleWidget(widgetDesc) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(widgetDesc),
    ],
  );
}

Output :

This screen depicts the usage of the flutter bottom navigationbar.

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates