How To Implement the TabBar in Flutter

In this guide, we will learn how to implement the TabBar in Flutter. For these, we should know what a TabBar in flutter is.TabBar is used to create the tabs. 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 on android devices while it is placed at the bottom on 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.

Apps often have different categories of content or features available to users. Naturally, we want our users to be able to quickly glance at each option and move between categories with a simple swipe. That’s where the Flutter TabBar class comes in.

In this article, we’ll tell you everything you need to know about TabBar in Flutter, show how to implement tabs in your Flutter app, and walk through some TabBar examples.

Properties of DefaultTabController

keyused to control how a widget is replaced with another.
lengthThe number of tabs.
initialIndexThe initial index of the selected tab. Defaults to 0.
childthe widget below this widget in the tree contains TabBar and TabBarView.

Properties of TabBar

key used to control how a widget is replaced with another
tabs list of tabs.
controllerUsed to control the selection and animation state.
isScrollableWhether this tab bar can be scrolled horizontally. Defaults to false.
indicatorColorThe color of the line below the selected tab.
automaticIndicatorColorAdjustmentWhether this tab bar should automatically adjust  indicatorColor to white if the indicatorColor is the same as the color of the parent widget. Defaults to true.
indicatorWeightThe thickness of the line below the selected tab. Defaults to 2.0.
indicatorPaddingPadding of the indicator. Defaults to EdgeInsets.zero.
indicatorUsed to create a custom indicator.
indicatorSizeHow to determine the indicator size.
labelColorThe color of selected tab labels.
labelStyleThe text style of the selected tab labels.
labelPaddingThe padding was added to each of the tab labels.
unselectedLabelColorThe color of unselected tab labels.
unselectedLabelStyleThe text style of the unselected tab labels.
dragStartBehaviorDetermines the way that drag start behavior is handled. Defaults to DragStartBehavior.start.
overlayColorDefines the ink response focus, hover, and splash colors.
mouseCursorThe mouse cursor when the pointer is hovering over the tabs.
enableFeedbackWhether gestures should provide acoustic and/or haptic feedback.
onTapA callback is to be called when a tab is tapped.
physicsThe physics effect affects the amination when the user interacts.

Properties of TabBarView

keyused to control how a widget is replaced with another
childrenThe widgets for each tab.
controllerUsed to control the selection and animation state.
physicsThe physics effect affects the amination when the user interacts.
dragStartBehaviorDetermines the way that drag start behavior is handled. Defaults to DragStartBehavior.start.

Let’s take an example of how we can implement the TabBar in our flutter application.

import 'package:flutter/material.dart';

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

  @override
  State<TabBarScreen> createState() => _TabBarScreenState();
}

class _TabBarScreenState extends State<TabBarScreen> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
          appBar: AppBar(
            title: const Text("TabBar in flutter"),
            centerTitle: true,
            bottom: const TabBar(
                indicatorColor: Colors.black,
                indicatorWeight: 2.1,
                // labelColor: Colors.white,
                unselectedLabelColor: Colors.red,
                tabs: [
                  Tab(icon: Icon(Icons.home), text: "Home"),
                  Tab(icon: Icon(Icons.search), text: "Search"),
                  Tab(icon: Icon(Icons.shopping_cart), text: "Shopping")
                ]),
          ),
          body: TabBarView(children: [
            const SizedBox(
              height: double.infinity,
              width: double.infinity,
              child: Center(
                child: Text("This is Home Page."),
              ),
            ),
            const SizedBox(
              height: double.infinity,
              width: double.infinity,
              child: Center(
                child: Text("This is Search Page."),
              ),
            ),
            // ignore: sized_box_for_whitespace
            Container(
              height: double.infinity,
              width: double.infinity,
              child: const Center(
                child: Text("This is Shopping Cart Page."),
              ),
            ),
          ])),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Get the full snippet from here