Tutorial 1 – Flutter Bottom Navigation Bar

This is the first post of the Flutter Bottom Navigation Bar series, I will share examples of bottom navigation bars from simple to advanced using flutter library and third-party libraries. I am not going to cover any basics of Flutter Development as I am assuming that you are already familiar with Stateless/Stateful Widgets, Scaffold, Appbar and other widgets (if still have any issue you can ask me any time).  

The Bottom Navigation Bar is a very important and useful component in mobile applications. Sometimes it gets difficult to choose from a variety of available third party libraries, i have shortlisted some of them and made examples to make better understanding while implementation. 

In this example we will see cover

  1. Basic and simple implementation.
  2. Integration with other screens.
  3. Problems while making more than 3 tabs.
  4. Tabs customization.

Implementation

In your Scaffold class you have a property named bottomNavigationBar, we will use this to make bottom navigation bar, let’s start 

Components Used

  1. BottomNavigationBar
  2. BottomNavigationBarItem

These two classes are mainly used to make bottom navigation bar.

By default you will have empty Scaffold like this

return Scaffold(
);

Now we will make tabs, as I have mentioned that the Scaffold has a property bottomNavigationBar and we will use that to make tabs.

Now we have added the bottom navigation bar successfully. But it is empty. We need to add items in it. 

return Scaffold(
bottomNavigationBar: BottomNavigationBar(),
);

Now we will add tab items to the empty bar.

return Scaffold(
        appBar: AppBar(title: Text(currentIndex==0?'Home Tab':currentIndex==1?'Category Tab':'Notification Tab'),),
     bottomNavigationBar: BottomNavigationBar(
       currentIndex: currentIndex,
       onTap: (index){
         onTapSelected(index);
       },
       type: BottomNavigationBarType.fixed,
       unselectedFontSize: 12,
       selectedFontSize: 16,
       unselectedItemColor: Colors.red,
       selectedItemColor: Colors.blue,
       showUnselectedLabels: true,
       showSelectedLabels: true,
       items: [
         BottomNavigationBarItem(
           title: Text('Home'),
           icon: Icon(Icons.home),
           activeIcon: Icon(Icons.add_to_home_screen)
         ),
         BottomNavigationBarItem(
             title: Text('Category'),
             icon: Icon(Icons.category),
             activeIcon: Icon(Icons.control_point_duplicate)

         ),
         BottomNavigationBarItem(
             title: Text('Notifications'),
             icon: Icon(Icons.notifications),
             activeIcon: Icon(Icons.dashboard)

         ),
         BottomNavigationBarItem(
             title: Text('About'),
             icon: Icon(Icons.info_outline
         ),)

       ],
     ),
        body: Container(
          child: screensList[currentIndex],
        ));
  }

In the above code, you can see we have added tabs and also some other properties lets understand everything steps by step.
BottomNavigationBar class have a property onTap which is used to capture tap event of any tab, it will return tapped tab index, for example

onTap: (index){
      onTapSelected(index);
    },

Here is method onTapSelected

void onTapSelected(index)
{
 setState(() {
   currentIndex=index;
 });
}

Now let’s move to the next part, which is screen attachment with tab tap events.

I have made 4 different Stateless Widgets to demonstrate the working.

Tab 1 – home_tab.dart

class HomeTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.red,
   );
 }
}

Tab 2 – category_tab.dart

class CategoryTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.blue,
   );
 }
}

Tab 3- notification_tab.dart

class NotificationTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.green,
   );
 }
}

Tab 4- about_tab.dart

class AboutTab extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Container(
     color: Colors.black,
   );
 }
}

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

List<Widget> screensList=[HomeTab(),CategoryTab(),NotificationTab(),AboutTab()];

When index 0 will tapp that is Home Tab it will call screenList 0 index that is HomeTab() and so on.

body: Container(
 child: screensList[currentIndex],
)

Some customization 

unselectedFontSize: 12,
selectedFontSize: 16,
unselectedItemColor: Colors.red,
selectedItemColor: Colors.blue,
showUnselectedLabels: true,
showSelectedLabels: true,

Problem you will face if you add more than 3 tabs.

The bottom navigation bar will become white when we 4th item, to fix this we need to mention navigation type as below 

type: BottomNavigationBarType.fixed,

Here is full source code

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bottom_navigation_bar/tabs/about_tab.dart';
import 'package:flutter_bottom_navigation_bar/tabs/category_tab.dart';
import 'package:flutter_bottom_navigation_bar/tabs/home_tab.dart';
import 'package:flutter_bottom_navigation_bar/tabs/notification_tab.dart';

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

class _MyHomePageState extends State<MyHomePage> {

 List<Widget> screensList=[HomeTab(),CategoryTab(),NotificationTab(),AboutTab()];
 int currentIndex=0;

 void onTapSelected(index)
 {
   setState(() {
     currentIndex=index;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(title: Text(currentIndex==0?'Home Tab':currentIndex==1?'Category Tab':'Notification Tab'),),
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: (index){
        onTapSelected(index);
      },
      type: BottomNavigationBarType.fixed,
      unselectedFontSize: 12,
      selectedFontSize: 16,
      unselectedItemColor: Colors.red,
      selectedItemColor: Colors.blue,
      showUnselectedLabels: true,
      showSelectedLabels: true,
      items: [
        BottomNavigationBarItem(
          title: Text('Home'),
          icon: Icon(Icons.home),
          activeIcon: Icon(Icons.add_to_home_screen)
        ),
        BottomNavigationBarItem(
            title: Text('Category'),
            icon: Icon(Icons.category),
            activeIcon: Icon(Icons.control_point_duplicate)

        ),
        BottomNavigationBarItem(
            title: Text('Notifications'),
            icon: Icon(Icons.notifications),
            activeIcon: Icon(Icons.dashboard)
        ),
        BottomNavigationBarItem(
            title: Text('About'),
            icon: Icon(Icons.info_outline
        ),)
      ],
    ),
       body: Container(
         child: screensList[currentIndex],
       ));
 }
}

If you want want tutorial on any specific topic which can be helpful in flutter development, feel free to ask.

Previous Post
Next Post

Leave a Reply

Your email address will not be published. Required fields are marked *