How To Implement the TabBar in Flutter

In this guide, we will learn how to implement 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

key	used to control how a widget is replaced with another.
length	The number of tabs.
initialIndex	The initial index of the selected tab. Defaults to 0.
child	the 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.
controller	Used to control the selection and animation state.
isScrollable	Whether this tab bar can be scrolled horizontally. Defaults to false.
indicatorColor	The color of the line below the selected tab.
automaticIndicatorColorAdjustment	Whether 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.
indicatorWeight	The thickness of the line below the selected tab. Defaults to 2.0.
indicatorPadding	Padding of the indicator. Defaults to EdgeInsets.zero.
indicator	Used to create a custom indicator.
indicatorSize	How to determine the indicator size.
labelColor	The color of selected tab labels.
labelStyle	The text style of the selected tab labels.
labelPadding	The padding was added to each of the tab labels.
unselectedLabelColor	The color of unselected tab labels.
unselectedLabelStyle	The text style of the unselected tab labels.
dragStartBehavior	Determines the way that drag start behavior is handled. Defaults to DragStartBehavior.start.
overlayColor	Defines the ink response focus, hover, and splash colors.
mouseCursor	The mouse cursor when the pointer is hovering over the tabs.
enableFeedback	Whether gestures should provide acoustic and/or haptic feedback.
onTap	A callback is to be called when a tab is tapped.
physics	The physics effect affects the amination when the user interacts.

Properties of TabBarView

key	used to control how a widget is replaced with another
children	The widgets for each tab.
controller	Used to control the selection and animation state.
physics	The physics effect affects the amination when the user interacts.
dragStartBehavior	Determines 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