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