Tab Bar In Flutter | Creating TabBar FlutterTPoint Example

Tab Bar in Flutter is used to create the tabs on top or bottom of the screen. Tabs give smooth moving between screens. We create Tab Bar when we want to navigate multiple screens from one place.

It is simple to create a Tab Bar in Flutter. In this tutorial we will create two Tabs. We will move to tabs by clicking or sliding the tabs. These are in the horizontal direction.

Complete Example Of Tab Bar In Flutter

We have a main TabScreen in which tabs will be loaded. Create the number of tabs as you want to create. In this tutorial we are going to create only two tabs.

Tab1.dart
Tab2.dart
TabScreen.dart

Creating The Tab Bar Screens In Flutter

Simply we created the 2 tabs for testing purposes. You can create according to your requirements. Create the content inside these tabs screens. Remember that the tab will not have the appBar.

Tab1.dart

This is just a simple screen which contains only the Text Widget in the center.

import 'package:flutter/material.dart';

class Tab1 extends StatefulWidget {
  const Tab1({Key? key}) : super(key: key);

  @override
  _Tab1State createState() => _Tab1State();
}

class _Tab1State extends State<Tab1> {
  @override
  Widget build(BuildContext context) {
    return Center(child: Container(child: Text("Tab 1", style: TextStyle(fontSize: 24),),));
  }
}

Tab2.dart

This is also just a simple screen which contains only the Text Widget in the center.

import 'package:flutter/material.dart';

class Tab2 extends StatefulWidget {
  const Tab2({Key? key}) : super(key: key);

  @override
  _Tab2State createState() => _Tab2State();
}

class _Tab2State extends State<Tab2> {
  @override
  Widget build(BuildContext context) {
    return Center(child: Container(child: Text("Tab 2", style: TextStyle(fontSize: 24),),));
  }
}

TabScreen.dart

TabScreen is the main screen in which we will load the tabs. Create DefaultTabController() as the root of your widget. To create the tabs use TabBar in the body section. Define the number of tabs there as follows.

import 'dart:io';

import 'package:ecommerce_app/Tabs/Tab1.dart';
import 'package:ecommerce_app/Tabs/Tab2.dart';
import 'package:flutter/material.dart';

class TabScreen extends StatefulWidget {
  @override
  _TabScreenState createState() => _TabScreenState();
}

class _TabScreenState extends State<TabScreen> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        initialIndex: 0,
        child: Scaffold(
          appBar: AppBar(title: Text(""),),
          backgroundColor: Colors.white,
          body: Column(
            children: [
              TabBar(
                labelColor: Colors.black,
                indicatorColor: Colors.blue,
                labelPadding: EdgeInsets.all(0),
                unselectedLabelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
                labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
                tabs: [
                  Tab(
                    // icon: Icon(Icons.add_circle_outline_rounded),
                    text: "Tab1",
                  ),
                  Tab(
                      // icon: Icon(Icons.add_circle_outline_rounded),
                      text: "Tab2"),
                ],
              ),
              Expanded(
                child: TabBarView(
                  // <-- Your TabBarView
                  children: [
                    Tab1(),
                    Tab2(),
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

How To Style Tab Bar In Flutter

Styling the Tab Bar in flutter, some properties are used. We can style the label text, colors, size, margin and many other properties which are as follows.

Label Style in Tab Bar

You can use the following properties to style the label in the tab bar. Please note that use these properties inside the Tabbar(). You can also style the selected and unselected labels

Default label Style

Use Following features for style the default label in tab bar.

labelColor: Colors.black,
indicatorColor: Colors.blue,
labelPadding: EdgeInsets.all(0),
labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w700),

Style Selected Label

To style the selected label you can use the below features.

labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.black),

Styling Unselected Label

To give the style for unselected tab use below properties.

unselectedLabelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
unselectedLabelColor: Colors.grey,

How To Add Icons in Tab Bar

To create icons with tabs in the tab bar, you can use icons inside the Tab() widget. You can create more widgets in the child section inside it. You can see it below.

TabBar(
  labelColor: Colors.black,
  indicatorColor: Colors.blue,
  labelPadding: EdgeInsets.all(0),
  unselectedLabelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
  unselectedLabelColor: Colors.grey,
  labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.black),
  tabs: [
    Tab(
      icon: Icon(Icons.add_circle_outline_rounded),
      text: "Tab1",
    ),
    Tab(
        icon: Icon(Icons.add_circle_outline_rounded),
        text: "Tab2"),
  ],
),

How To Implement Sliding Feature in Tab Bar

The material Tab Bar provides the default feature of sliding the tabs. No need to do anything for creating the sliding feature in the tab bar for tabs. You can copy and paste the above code to use in your projects.

Thank you for visiting the tutorial in flutterTpoint. Hope this tutorial helped you. Please comment for any issue and doubts.