How to use the Bottom Navigation bar in Flutter

Getting started with the Bottom navigation bar in Flutter

Hello devs, let’s learn everything about the bottom navigation bar. In this Flutter Tutorial, I will try to cover all the basics and I will show you how to implement it in your Flutter app.

What is the use of the Bottom Navigation bar?

Before starting with the implementation part have you thought of this “Do I really need it or Can I use any other option like burger menu (side navigation bar) ?”.

Well, what I think is if you have a minimum of 2 or a maximum of 5 independent views that you want to display to the user then you can easily go with the Bottom Navigation bar otherwise you can with the sidebar menu.

Implementation

Overview

We are going to design a simple Flutter app with a BottomNavigationBar class. This is the inbuilt class that comes with the Flutter package itself.

As you can see in the below image, our app will have two options in the bottom bar. And we will also implement the onTap() action for each of them.

Let’s code it

STEP-1: Let’s create a new Flutter project. I personally like to use Android Studio but you can use Visual Studio as well.

Delete all the extra boilerplate code and at the end, you will get something like this.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Bottom Navigation Bar Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        
      ),
    );
  }

}

STEP-2: Inside the Scaffold, write the code for the BottomNavigationBar like this.

      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.account_balance), title: Text('Home')),
        BottomNavigationBarItem(icon: Icon(Icons.build), title: Text('Settings'))
      ],
        //onTap: didTapNavigationBar,
        //currentIndex: selectedIndex,
      ),

Now if you run the app at this stage then you will find the BottomNavigationBar with two icons. But nothing is going to happen if you click on them.

STEP-3: Let’s implement the click action for the two icons. First, we need to create a method with an Int parameter and assign it to the onTap callback.

//Method with a parameter of type Int  
void didTapNavigationBar(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.account_balance), title: Text('Home')),
        BottomNavigationBarItem(icon: Icon(Icons.build), title: Text('Settings'))
      ],
        onTap: didTapNavigationBar,
       currentIndex: selectedIndex,
      ),

STEP-4: The Int parameter in the above method returns the value of the selected index. It means if you select the first icon then the int value will be 0 and if you select the second icon then the int value will be 1.

Check out the complete code.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Bottom Navigation Bar Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex = 0;

  List<Widget> widgetArray = [
    Text('This is Home', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),
    Text('This is Settings', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),)
  ];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: widgetArray[selectedIndex],
      ),
      
      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.account_balance), title: Text('Home')),
        BottomNavigationBarItem(icon: Icon(Icons.build), title: Text('Settings'))
      ],
        onTap: didTapNavigationBar,
        currentIndex: selectedIndex,
      ),
    );
  }

  void didTapNavigationBar(int index) {
    setState(() {
      selectedIndex = index;
    });
  }
}

Conclusion

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

FAQs