Tutorial 6 - Flutter Bottom Navigation Bar implementation using titled_navigation_bar Library

This is the 6th tutorial of the Flutter Bottom Navigation Series. Till then we have learned how to make bottom navigation bar on any app using flutter’s own package and third party packages. Hope you are learning new things from every tutorial and making awesome flutter apps. Flutter development is now becoming a new trend all over the world.

In this tutorial, we will use titled_navigation_bar to make beautiful bottom navigation bar and some tabs. The library is very easy to use as the previous libraries. If you landed directly on this article then I suggest to read the previous one also, you will have some awesome stuff related to bottom navigation.

Implementation

First of all we need to add dependency, to add functionality of library in flutter app

titled_navigation_bar: any

Main classes we will use to make bottom navigation bar and tabs

Make screens which you want to open on tab tapping. I have create 4 screen as mentioned below-

TitledBottomNavigationBar()

home_tab_screen.dart – Tab 1

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

class HomeTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.blue,
    );
  }
}

profile_tab_screen.dart – Tab 2

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

class ProfileTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.green,
    );
  }
}

order_tab_screen.dart – Tab 3

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

class ProfileTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.green,
    );
  }
}

search_tab_screen.dart – Tab 4

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

class SearchTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      color: Colors.orange,
    );
  }
}

bag_tab_screen.dart – Tab 5

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

class BagTabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: MediaQuery.of(context).size.height, color: Colors.black);
  }
}

Now add widgets in a list so that we can call on the basis of index tapped.

List<Widget> _listPages = [
    HomeTabScreen(),
    BagTabScreen(),
    OrdersTabScreen(),
    ProfileTabScreen(),
    SearchTabScreen()
  ];

When index 0 will tapp that is Home Tab it will call screenList 0 index that is HomeTab() and so on. The complete implementation code is given below-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_titled_navigation_bar/tabs/orders_tab_screen.dart';
import 'package:flutter_titled_navigation_bar/tabs/profile_tab_screen.dart';
import 'package:flutter_titled_navigation_bar/tabs/search_tab_screen.dart';
import 'package:flutter_titled_navigation_bar/tabs/home_tab_screen.dart';
import 'package:flutter_titled_navigation_bar/tabs/bag_tab_screen.dart';
import 'package:titled_navigation_bar/titled_navigation_bar.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<TitledNavigationBarItem> items = [
    TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
    TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
    TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
    TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart),
    TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline),
  ];

  final List<Widget> listScreens = [
    HomeTabScreen(),
    SearchTabScreen(),
    BagTabScreen(),
    OrdersTabScreen(),
    ProfileTabScreen()
  ];
  bool navBarMode = false;

  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Switch(
                value: navBarMode,
                onChanged: (v) {
                  setState(() => navBarMode = v);
                },
              ),
            ],
          ),
        ],
        title: Text("Titled Bottom Bar"),
      ),
      body: listScreens[_selectedIndex],
      bottomNavigationBar: TitledBottomNavigationBar(
        onTap: (index) {
          print("Selected Index: $index");
          setState(() {
            _selectedIndex = index;
          });
        },
        reverse: navBarMode,
        curve: Curves.easeInBack,
        items: items,
        currentIndex: _selectedIndex,
        activeColor: Colors.red,
        inactiveColor: Colors.blueGrey,
      ),
    );
  }
}

Customization (Optional)

TitledBottomNavigationBar

onTap – Use this to get notified when an item is clicked, you can retrieve the current item’s index on this function. Should not be null.
items – The items of your bottom navigation bar. Use the TitledNavigationBarItem class to add items. Should not be null.
curve – Use this to define your custom curve animation. Should not be null.
reverse – If true, the visible widget of the selected item will be the Text (with the title of the item). If false, the visible widget of the selected item will be the icon. Default to false.
activeColor – The active Text/Icon color. The default color is the indicatorColor of your app Theme.
nactiveColor – The inactive Text/Icon color. The default is the black color.<br/> indicatorColor – The indicator color. The default color is the indicatorColor of your app Theme.
currentIndex – Use this to update the Bar giving a position.
enableShadow – Use this to remove the NavigationBar’s shadow.

TitledNavigationBarItem

icon -The icon of this item. This will be used as default state if reverse mode is disabled.
title – The title of this item. This will be used as default state if reverse mode is enabled