Flutter Bottom Navigation Tutorial with Example

In our flutter tutorial series, I’m going to write about flutter bottom navigation tutorial with 4 items/tabs

Docs: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

Getting started

Let’s explore, how to work with a bottom navigation bar with flutter.

flutter create flutterdemo
cd flutterdemo

Now, we need work with our main.dart

import 'package:flutter/material.dart';

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

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

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

  List _pages = [
    Text("Home"),
    Text("Search"),
    Text("Account"),
  ];

  _changeIndex(int index) {
    setState(() {
      _selectedTabIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]),
      body: Center(child: _pages[_selectedTabIndex]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTabIndex,
        onTap: _changeIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text("Search")),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text("My Account")),
        ],
      ),
    );
  }
}

Explanation:

• To display bottom navigation, we have to usebottomNavigationBar property with Scaffold
• BottomNavigationBar() requires items where you can useBottomNavigationBarItem(). When user clicks any Tab, we’re calling _changeIndex to update _selectedTabIndex.
• Based on _selectedTabIndex we’re displaying required widgets using _pages[_selectedTabIndex] in body

Note: you can create separate page & pass that widget into _pages

Flutter Bottom Navigation Tutorial with 4 tabs

In case, if you want to add 4 items on your tab, we need to add type: BottomNavigationBarType.fixed on BottomNavigationBar so our final code looks like

import 'package:flutter/material.dart';

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

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

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

  List _pages = [
    Text("Home"),
    Text("Search"),
    Text("Cart"),
    Text("Account"),
  ];

  _changeIndex(int index) {
    setState(() {
      _selectedTabIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]),
      body: Center(child: _pages[_selectedTabIndex]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTabIndex,
        onTap: _changeIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text("Search")),
          BottomNavigationBarItem(
              icon: Icon(Icons.shopping_cart), title: Text("Cart")),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text("My Account")),
        ],
      ),
    );
  }
}

Output