Bottom Navigation Tab Bar

Introduction

 
Flutter is loaded with predefined components and bottom navigation bar is one of them. So, let’s see how can we implement a bottom navigation tab bar in Flutter.
 
Note
This article is one of the parts of my series Chat app in Flutter using Firebase. Our chat app series is one of the best examples to make chat app in Flutter using Google Firebase. If you are interested in chat apps, you can check out the whole series.
 

Output

 

Steps

  • The first and most basic step is to create a new application in Flutter. If you are a beginner, you can check my blog Create a first app in Flutter. I have created an app named “flutter_chat_app”.

  • Create a new folder, "Pages" and in that, create a page named home.dart. On this page, we will generate the bottom navigation tab bar. So, we will put a button in the main.dart file which will navigate to the home.dart file. Below is the code for navigation from main.dart file to home.dart file. 
    1. Navigator.of(context).pushReplacement(    
    2.   MaterialPageRoute(    
    3.     builder: (context) => HomePage(),    
    4.   ),    
    5. );   
  • In home.dart file, create a class TabContent which contains the title and actual content of the tab. Check out the below class.
    1. class TabContent {    
    2.   String title;    
    3.   Widget content;    
    4.   TabContent({this.title, this.content});    
    5. }   
  • Initialize an integer variable to track active tab index.
    1. int _currentIndex = 0;    
  • Initialize the content of the tabs. For this example, we will take 2 tabs.
    1. List<TabContent> tabContent = [    
    2.   TabContent(    
    3.     title: 'Tab1',    
    4.     content: Center(    
    5.       child: Column(    
    6.         mainAxisAlignment: MainAxisAlignment.center,    
    7.         children: [    
    8.           Text('Tab1'),    
    9.         ],    
    10.       ),    
    11.     ),    
    12.   ),    
    13.   TabContent(    
    14.     title: 'Tab2',    
    15.     content: Center(    
    16.       child: Column(    
    17.         mainAxisAlignment: MainAxisAlignment.center,    
    18.         children: [    
    19.           Text('Tab2'),    
    20.         ],    
    21.       ),    
    22.     ),    
    23.   )    
    24. ];    
  • Now, configure the bottom navigation tab bar in MaterialApp widget.
    1. return MaterialApp(    
    2.   home: DefaultTabController(    
    3.     length: 2,    
    4.     child: Scaffold(    
    5.       appBar: AppBar(    
    6.         title: Text(tabContent[_currentIndex].title),    
    7.       ),    
    8.       body: tabContent[_currentIndex].content,    
    9.       bottomNavigationBar: BottomNavigationBar(    
    10.         onTap: (index) {    
    11.           setState(    
    12.             () {    
    13.               _currentIndex = index;    
    14.             },    
    15.           );    
    16.         }, // new    
    17.         currentIndex: _currentIndex, // new    
    18.         items: [    
    19.           new BottomNavigationBarItem(    
    20.             icon: Icon(Icons.mail),    
    21.             title: Text('Tab1'),    
    22.           ),    
    23.           new BottomNavigationBarItem(    
    24.             icon: Icon(Icons.verified_user),    
    25.             title: Text('Tab2'),    
    26.           )    
    27.         ],    
    28.       ),    
    29.     ),    
    30.   ),    
    31. );    
  • Hurray!!! You are done with the sample building block of bottom navigation tab bar in Flutter. Run the program. Tweak the code and understand it in depth.

Conclusion

 
In this article, we have learned how we can implement the bottom navigation tab bar in Flutter. You can even customize and make it rich according to your requirements.
Author
Parth Patel
271 7k 1.6m
Next » State Management

©2024 C# Corner.