Table of contents
1.
Introduction
2.
Steps for Creating a Flutter TabBar
3.
Preserving the state of tabs
4.
Frequently Asked Questions
4.1.
What is the function of the Flutter TabBar in Android?
4.2.
How do we customize the Flutter TabBar?
4.3.
In Flutter, what is DefaultTabController?
4.4.
How do we change the background color of a Flutter TabBar?
4.5.
In Flutter Tabbar, how do we acquire the selected tab position?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Flutter TabBar

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The tabs are primarily used for navigating on mobile devices. Tabs are styled differently on different operating systems. For example, it is at the top of the screen on Android smartphones, but on iOS devices, it is towards the bottom.

Working with tabs is prevalent in Material Design-compliant Android and iOS apps. Flutter makes it simple to construct a tab layout. To add tabs to the program, we must first build a TabBar and a TabBarView, which we will then attach to the TabController. The controller will sync both so that we may get the desired behavior.

This blog will look at how Flutter TabBar works. 

Source: https://1.bp.blogspot.com/-CsH3i2D-S7k/X2uUUTnedFI/AAAAAAAAB3Y/OyusE5X-L24ebM5X71_1fafzHBX2O5M2gCNcBGAsYHQ/s2048/Flutter_tabs.png

Steps for Creating a Flutter TabBar

Let's learn how to make a tab bar in the Flutter application step by step.

Step 1: To begin, open your IDE and create a Flutter project. We are using Android Studio in this case.

Source: https://www.tutorialspoint.com/flutter/images/project_name.jpg

 

Step 2: Navigate to the lib folder in Android Studio after opening the app. Create two dart files named FirstScreen and SecondScreen in the lib folder.

Source: https://abhiandroid.com/androidstudio/wp-content/uploads/2016/05/Paste-jar-files-in-Libs-folder-Android-Studio.jpg

 

In the FirstScreen.dart file, write the following code:

import 'package:flutter/material.dart';  

class FirstScreen extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      child: Center(  
        child: Text('This is the home screen',  
            style: TextStyle(fontSize: 32.0),  
          )  
      ),  
    );  
  }  
}  

 

In the SecondScreen.dart file, write the following code:

import 'package:flutter/material.dart';  

class SecondScreen extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      child: Center(  
        child: Text('This is the calling screen..',  
        style: TextStyle(fontSize: 35.0),  
        ),  
      ),  
    );  
  }  
} 

 

Step 3: The next step is to build a DefaultTabController. The DefaultTabController generates a TabController for all widgets and makes it accessible.

DefaultTabController(  
  // The number of tabs that will be shown. 
  length: 2,  
  child: // In the next step, complete this code.  
); 

 

Step 4: Make a tab for it. The TabBar widget may be used to generate tabs, as shown in the code below.

DefaultTabController(  
  length: 2,  
  child: Scaffold(  
    appBar: AppBar(  
      bottom: TabBar(  
        tabs: [  
          Tab(icon: Icon(Icons.directions_car)),  
          Tab(icon: Icon(Icons.directions_bike)),  
        ],  
      ),  
    ),  
  ),  
);

 

Step 5: Create content for each tab to display the content when a tab is selected. To do this, we must employ the TabBarView widget as follows:

TabBarView(  
  children: [  
  ],  
);

 

Step 6: Finally, open the main.dart file and paste the code below into it.

import 'package:flutter/material.dart';  
import './FirstScreen.dart';  
import './SecondScreen.dart';  

void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: DefaultTabController(  
        length: 2,  
        child: Scaffold(  
          appBar: AppBar(  
            title: Text('Flutter Tabbar Demo(CodingNinjas)'),  
            bottom: TabBar(  
              tabs: [  
                Tab(icon: Icon(Icons.contacts), text: "Tab 1"),  
                Tab(icon: Icon(Icons.camera_alt), text: "Tab 2")  
              ],  
            ),  
          ),  
          body: TabBarView(  
            children: [  
              FirstScreen(),  
              SecondScreen(),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}  

 

Step 7: Run the app on Android Studio now. It will display the following screen with two tab icons. As a result, clicking any tab icons will take you to the relevant screen.

 

Output:

Preserving the state of tabs

Tabs do not save their state by default. When we browse to the next tab and then return, the previous tab will not display the material we left while scrolling; instead, it will begin from the beginning. This results in an awful user experience.

Let's look at several options for dealing with this problem. Some of them are as follows:-

  • Provide the mixin to the class
  • Override the getter

Frequently Asked Questions

What is the function of the Flutter TabBar in Android?

A TabLayout allows you to show tabs horizontally. A TabLayout, when combined with a ViewPager, may provide a familiar interface for browsing between pages in a swipe view.

How do we customize the Flutter TabBar?

We may utilize the tabbar widget to get custom flutter tabs designs to generate customized flutter tabbars.

In Flutter, what is DefaultTabController?

The inherited widget DefaultTabController is used to share a TabController with a Flutter TabBar or a TabBarView. It is used when it is inconvenient to share an explicitly constructed TabController because the tab bar widgets are created by a stateless parent widget or by different parent widgets.

How do we change the background color of a Flutter TabBar?

Simply place a TabBar in the Body of the Scaffold and wrap it in a Column Widget to use both without conflict. Wrap TabBar in a Container widget to modify the color of the tabs. This is how you change the color of the Flutter Tabbar.

In Flutter Tabbar, how do we acquire the selected tab position?

Using DefaultTabController, we can access the current index whether the user switches tabs by swiping or tapping on the Flutter Tabbar. 

Note: We must wrap our Scaffold within a Builder before using DefaultTabController to obtain the tab index. of(context). Scaffold index inside

Conclusion

In this article, we have extensively discussed what a Flutter TabBar is and how to implement it in Flutter.

We hope that this blog has helped you enhance your knowledge regarding Flutter TabBar. If you would like to learn more, check out our articles on the difference between flutter and react nativerichtext widget in a flutterflutter interview questionsthe growing demand for Google’s Flutter. Do upvote our blog to help other ninjas grow. Happy Coding!

Live masterclass