Flutter Bottom Navigation Bar Tutorial

Hi!

Bottom navigation is a component of the material design system by Google. If you are designing a user interface design, then material design gives you the best practices, guidelines, and components.

The flutter framework is also backed by Google. So, it also has a material library that you can use to easily create UI which follows the material design. And BottomNavigationBar is a class or widget that you can use from this library.

The bottom navigation bar is useful when you want to give direct navigation to two or more pages in a flutter app. At the bottom of the page, we display buttons when the user taps on the buttons, the page display according to the press of the user.

Flutter also has a Scaffold widget, which has a bottomNavigationBar property. This property receives a BottomNavigationBar widget. After specifying this property a bottom navigation will be shown as you can see in the above preview.

Let’s learn more by following this example:

Basic Bottom Navigation Bar Example #1

This is the simplest example that will display a bottom navigation bar at the bottom.

Preview:

Now, let’s follow these steps to create the app shown here.

Step 1:

Create a Sample Project

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'CodeWithHussain.com',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
..........
}

Step 2:

Inside the State class, we will manage the BottomNavigationBar.

Here, we create two state variables.

1. myIndex (int variable)
2. widgetList ( List of widgets)

  int myIndex = 0;
  List<Widget> widgetList = const [
    Text(
      'Home',
      style: TextStyle(fontSize: 40),
    ),
    Text(
      'Music',
      style: TextStyle(fontSize: 40),
    ),
    Text(
      'News',
      style: TextStyle(fontSize: 40),
    ),
  ];

These widgets list will be used to show different content on different screens of the app. These screens are the pages that will be shown when the user presses a particular button.

myIndex value will have the index of the selected button in the bottom navigation bar. And that same index is used to update the UI with the relevant list items.

  body: Center(
        child: widgetList[myIndex],
      ),

Step 3:

We create a Scaffold widget inside the build() method of the widget.

And specify the body and bottomNavigationBar parameters.

body as we talk before will be updated according to the user input press.

And bottomNavigationBar is a parameter where we pass the flutter BottomNavigationBar widget.

Scaffold(
      appBar: AppBar(title: const Text('Codewithhussain.com')),
      body: Center(
        child: widgetList[myIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            myIndex = index;
          });
        },
        currentIndex: myIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.music_note),
            label: 'Music',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.newspaper),
            label: 'News',
          ),
        ],
      ),
    );

BottomNavigationBar will take some arguments that you can see below:

type	This is the type of Bottom Navigation.
onTap	Here we receive the index from the system, then we set the state of the myIndex state variable.
currentIndex	It shows the selected index of the button of the bottom navigation bar.
items	Its a list of BottomNavigationBarItem widgets where we specify icon and label properties.

Now, let’s make things together and see the complete example code.

Complete Code:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'CodeWithHussain.com',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int myIndex = 0;
  List<Widget> widgetList = const [
    Text(
      'Home',
      style: TextStyle(fontSize: 40),
    ),
    Text(
      'Music',
      style: TextStyle(fontSize: 40),
    ),
    Text(
      'News',
      style: TextStyle(fontSize: 40),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Codewithhussain.com')),
      body: Center(
        child: widgetList[myIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            myIndex = index;
          });
        },
        currentIndex: myIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.music_note),
            label: 'Music',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.newspaper),
            label: 'News',
          ),
        ],
      ),
    );
  }
}

Flutter bottom navigation comes in different styles. We already check the simple example above.

Let’s check how to create this navigation with the Floating Action Button.

Bottom Navigation Bar Center Button (FAB) Example #2

Here we create a FloatingActionButton with BottomNavigationBar. This is also similar to the above example. So, we don’t repeat the obvious things again. Let’s see the preview.

Preview:

In the preview, we have two bottom navigation buttons with the name “Home” and “News”. And also we have a floating action button, which is a kind of floating in more accurately docked at the center of the bottom bar. Let’s check the complete code.

Complete Code:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'CodeWithHussain.com',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int myIndex = 0;
  List<Widget> widgetList = const [
    Text(
      'Home',
      style: TextStyle(fontSize: 40),
    ),
    Text(
      'News',
      style: TextStyle(fontSize: 40),
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Codewithhussain.com')),
      body: Center(
        child: widgetList[myIndex],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            myIndex = index;
          });
        },
        currentIndex: myIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.newspaper),
            label: 'News',
          ),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

Logic is almost same as the example #1 but the difference is:

We have a floatingActionButton property specified.

And the floatingActionButtonLocation which actually docked the button in the middle of the two navigation bar buttons.

BottomNavigationBar Constructor

There are different properties that we can specify to customize the look and feel of the bar. Check the constructor:

 BottomNavigationBar({
    super.key,
    required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation,
    this.type,
    Color? fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color? selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme,
    this.unselectedIconTheme,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels,
    this.showUnselectedLabels,
    this.mouseCursor,
    this.enableFeedback,
    this.landscapeLayout,
  })

Some important properties:

item List<BottomNavigationBarItem>

item parameter cannot be null. It takes BottomNavigationBarItem a list as an argument.

We have to specify at least two BottomNavigationBarItem widgets.

BottomNavigationBarItem label property should not be null.

currentIndex

currentIndex represents the current selected Index of the Bottom Navigation Bar.

property explanation

Customizations

We can use some properties to customize the appearance of the bar.

Change Color

These properties are used to change color.

Color? fixedColor,
this.backgroundColor,
Color? selectedItemColor,
this.unselectedItemColor,

backgroundColor is used to give a background color.

BottomNavigationBarItem has two states selected or unselected.

We can style both of them using selectedItemColor and unselectedItemColor.

But remember that when you pass selectedItemColor you can’t pass the fixedColor.

fixedColor vs selectedItemColor

If you try to pass both properties. You will find an assertion like:

‘Either selectedItemColor or fixedColor can be specified, but not both’,

official docs

Change Elevation

elevation property is used to change the elevation or shadow of the bottom navigation bar.

elevation:20;

Remove Shadow using Elevation

You can just pass 0 elevation to remove the shadow from the bottom navigation bar.

elevation:0;

Conclusion

This is the foundational guide about BottomNavigationBar. Hope you learn something. Thanks