Flutter Tabbar

In this section, we are going to learn how the tab bar works in Flutter. The tabs are mainly used for mobile navigation. The styling of tabs is different for different operating systems. For example, it is placed at the top of the screen in android devices while it is placed at the bottom in iOS devices.

Working with tabs is a common pattern in Android and iOS apps that follow the Material Design guidelines. Flutter provides a convenient way to create a tab layout. To add tabs to the app, we need to create a TabBar and TabBarView and attach them with the TabController. The controller will sync both so that we can have the behavior which we need.

Let us see step by step to create a tab bar in Flutter application.

Step 1: First, you need to create a Flutter project in your IDE. Here, I am going to use Android Studio.

Step 2: Open the app in Android Studio and navigate to the lib folder. Inside the lib folder, create two dart files and named it FirstScreen and SecondScreen.

Write the following code in the FirstScreen:

import 'package:flutter/material.dart';  
  
class FirstScreen extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      child: Center(  
        child: Text('It is a contact tab, which is responsible for displaying the contacts stored in your mobile',  
            style: TextStyle(fontSize: 32.0),  
          )  
      ),  
    );  
  }  
}  

Write the following code in the SecondScreen:

import 'package:flutter/material.dart';  
  
class SecondScreen extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      child: Center(  
        child: Text('It is a second layout tab, which is responsible for taking pictures from your mobile.',  
        style: TextStyle(fontSize: 35.0),  
        ),  
      ),  
    );  
  }  
}