Flutter - Bottom navigation bar.

To navigate from one screen to another screen on a single page, there are many options for making navigation easy in your application for the user. Bottom Navigation Bar is one of them. 

Bottom Navigation Bar always stays at the bottom of your mobile application and provides navigation between the views of the mobile application. Each Bottom Navigation bar item denotes a different sub screen or feature of an application.

You should use Bottom Navigation if you have three to five top-level navigation items of the mobile application. Otherwise, we should use Navigation Drawer and scrollable Tabbar. You can see a simple example of Drawer and Tabbar here.

To create a bottom bar based app, Flutter SDK provides us an inbuilt widget BottomNavigationBar. You have to use BottomNavigationBarItem to define item properties. 

In this post, we going to explain a basic of bottom bar implementation in Flutter. We'll use three item, Home, Location, and Friends. After clicking or swipe on the screen, you'll able to change application feature. 

This blog assumes that you have already set up the flutter in your PC and you have a basic idea of Flutter Application. If you have not install flutter yet, get started from here.

So, let's start it,




Creating a New Project  
1. Create a new project from File ⇒ New Flutter Project with your development IDE . 
2. Open main.dart file and edit it. As we have set our theme and change debug banner property of Application.

main.dart
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Bottom Navigation',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primaryColor: const Color(0xFF02BB9F),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFFFFAD32),
      ),
      home: new DashboardScreen(title: 'Bottom Navigation'),
    );
  }
}

3. After that, create DashboardScreen class inside of main.dart as you can see below. We have made it stateful widget because it will update on tab change.

main.dart
class DashboardScreen extends StatefulWidget {
  DashboardScreen({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _DashboardScreenState createState() => new _DashboardScreenState();
}

4. After that, create _DashboardScreenState class inside of main.dart. Here, we'll write the main logic of bottom bar navigation. So, first of all, initialize the widget with the following properties.

main.dart 

//inside _DashboardScreenState class
  PageController _pageController;
  int _page = 0;

  @override
  void initState() {
    super.initState();
    _pageController = new PageController();
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

As you can see, we have created an instance of pageController to control navigation and we managing a tag(_page) for a page.

5. Now, create a method navigationTapped. Here, we'll change an item of the Bottom bar when the user tab on an item. 

main.dart

//inside _DashboardScreenState class
 void navigationTapped(int page) {
    // Animating to the page.
    // You can use whatever duration and curve you like
    _pageController.animateToPage(page,
        duration: const Duration(milliseconds: 300), curve: Curves.ease);
 }

6. It's time to create the bottom bar item and set its properties. Now, edit build method. As you can see below.

main.dart

//inside _DashboardScreenState class
 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          widget.title,
          style: new TextStyle(color: const Color(0xFFFFFFFF)),
        ),
      ),
      body: new PageView(
        children: [
          new Home("Home screen"),
          new Location("Location screen"),
          new Friends("Friends screen"),
        ],
        onPageChanged: onPageChanged,
        controller: _pageController,
      ),
      bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
              // sets the background color of the `BottomNavigationBar`
              canvasColor: const Color(0xFF167F67),
            ), // sets the inactive color of the `BottomNavigationBar`
        child: new BottomNavigationBar(
          items: [
            new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.home,
                  color: const Color(0xFFFFFFFF),
                ),
                title: new Text(
                  "Home",
                  style: new TextStyle(
                    color: const Color(0xFFFFFFFF),
                  ),
                )),
            new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.location_on,
                  color: const Color(0xFFFFFFFF),
                ),
                title: new Text(
                  "Location",
                  style: new TextStyle(
                    color: const Color(0xFFFFFFFF),
                  ),
                )),
            new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.people,
                  color: const Color(0xFFFFFFFF),
                ),
                title: new Text(
                  "Friends",
                  style: new TextStyle(
                    color: const Color(0xFFFFFFFF),
                  ),
                ))
          ],
          onTap: navigationTapped,
          currentIndex: _page,
        ),
      ),
    );
  }

in the above snippet, we have added app bar with a title Text. After that, we have provided an instance of PageView. It contains all the pages that will switch on bottom bar tap. At the end, we have used the bottomNavigationBar property for define bottom bar item.

Now merge all above code snippet, the final main.dart file look like below.

main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bottom_bar_navigation/friends.dart';
import 'package:flutter_bottom_bar_navigation/home.dart';
import 'package:flutter_bottom_bar_navigation/location.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Bottom Navigation',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primaryColor: const Color(0xFF02BB9F),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFFFFAD32),
      ),
      home: new DashboardScreen(title: 'Bottom Navigation'),
    );
  }
}

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

  final String title;

  @override
  _DashboardScreenState createState() => new _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  PageController _pageController;
  int _page = 0;

  @override
  void initState() {
    super.initState();
    _pageController = new PageController();
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }


  void navigationTapped(int page) {
    // Animating to the page.
    // You can use whatever duration and curve you like
    _pageController.animateToPage(page,
        duration: const Duration(milliseconds: 300), curve: Curves.ease);
  }

  void onPageChanged(int page) {
    setState(() {
      this._page = page;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(
          widget.title,
          style: new TextStyle(color: const Color(0xFFFFFFFF)),
        ),
      ),
      body: new PageView(
        children: [
          new Home("Home screen"),
          new Location("Location screen"),
          new Friends("Friends screen"),
        ],
        onPageChanged: onPageChanged,
        controller: _pageController,
      ),
      bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
              // sets the background color of the `BottomNavigationBar`
              canvasColor: const Color(0xFF167F67),
            ), // sets the inactive color of the `BottomNavigationBar`
        child: new BottomNavigationBar(
          items: [
            new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.home,
                  color: const Color(0xFFFFFFFF),
                ),
                title: new Text(
                  "Home",
                  style: new TextStyle(
                    color: const Color(0xFFFFFFFF),
                  ),
                )),
            new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.location_on,
                  color: const Color(0xFFFFFFFF),
                ),
                title: new Text(
                  "Location",
                  style: new TextStyle(
                    color: const Color(0xFFFFFFFF),
                  ),
                )),
            new BottomNavigationBarItem(
                icon: new Icon(
                  Icons.people,
                  color: const Color(0xFFFFFFFF),
                ),
                title: new Text(
                  "Friends",
                  style: new TextStyle(
                    color: const Color(0xFFFFFFFF),
                  ),
                ))
          ],
          onTap: navigationTapped,
          currentIndex: _page,
        ),
      ),
    );
  }
}

7. At the end, we have created Home, Location and Friends widget screen that we have mapped with PageView in the main.dart. As you can see, the files are the same with a different class name. In this files, we showing a title of the selected tab.  

home.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  Home(this.listType);
  final String listType;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              listType,
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

location.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Location extends StatelessWidget {
  Home(this.listType);
  final String listType;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              listType,
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

friends.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  Home(this.listType);
  final String listType;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              listType,
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

You can create some complex User Interface there and you can fetch some data from the network to display here.


As you can see it is working absolutely fine.

So that’s all for Bottom Navigation bar in Flutter. I hope the post helped you to learn about Bottom Navigation bar. 

               

If you facing any issue, you can get a full working project from Github or please feel free to ask from comment section below.