TabBar class

A Material Design primary tab bar.

Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations.

Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView.

If a TabController is not provided, then a DefaultTabController ancestor must be provided instead. The tab controller's TabController.length must equal the length of the tabs list and the length of the TabBarView.children list.

Requires one of its ancestors to be a Material widget.

Uses values from TabBarTheme if it is set in the current context.

This sample shows the implementation of TabBar and TabBarView using a DefaultTabController. Each Tab corresponds to a child of the TabBarView in the order they are written.
link

To create a local project with this code sample, run:
flutter create --sample=material.TabBar.1 mysample

TabBar can also be implemented by using a TabController which provides more options to control the behavior of the TabBar and TabBarView. This can be used instead of a DefaultTabController, demonstrated below.
link

To create a local project with this code sample, run:
flutter create --sample=material.TabBar.2 mysample

This sample showcases nested Material 3 TabBars. It consists of a primary TabBar with nested a secondary TabBar. The primary TabBar uses a DefaultTabController while the secondary TabBar uses a TabController.
link

To create a local project with this code sample, run:
flutter create --sample=material.TabBar.3 mysample

See also:

Inheritance
Implemented types

Constructors

TabBar({Key? key, required List<Widget> tabs, TabController? controller, bool isScrollable = false, EdgeInsetsGeometry? padding, Color? indicatorColor, bool automaticIndicatorColorAdjustment = true, double indicatorWeight = 2.0, EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero, Decoration? indicator, TabBarIndicatorSize? indicatorSize, Color? dividerColor, double? dividerHeight, Color? labelColor, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, Color? unselectedLabelColor, TextStyle? unselectedLabelStyle, DragStartBehavior dragStartBehavior = DragStartBehavior.start, MaterialStateProperty<Color?>? overlayColor, MouseCursor? mouseCursor, bool? enableFeedback, ValueChanged<int>? onTap, ScrollPhysics? physics, InteractiveInkFeatureFactory? splashFactory, BorderRadius? splashBorderRadius, TabAlignment? tabAlignment, TextScaler? textScaler})
Creates a Material Design primary tab bar.
const
TabBar.secondary({Key? key, required List<Widget> tabs, TabController? controller, bool isScrollable = false, EdgeInsetsGeometry? padding, Color? indicatorColor, bool automaticIndicatorColorAdjustment = true, double indicatorWeight = 2.0, EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero, Decoration? indicator, TabBarIndicatorSize? indicatorSize, Color? dividerColor, double? dividerHeight, Color? labelColor, TextStyle? labelStyle, EdgeInsetsGeometry? labelPadding, Color? unselectedLabelColor, TextStyle? unselectedLabelStyle, DragStartBehavior dragStartBehavior = DragStartBehavior.start, MaterialStateProperty<Color?>? overlayColor, MouseCursor? mouseCursor, bool? enableFeedback, ValueChanged<int>? onTap, ScrollPhysics? physics, InteractiveInkFeatureFactory? splashFactory, BorderRadius? splashBorderRadius, TabAlignment? tabAlignment, TextScaler? textScaler})
Creates a Material Design secondary tab bar.
const

Properties

automaticIndicatorColorAdjustment → bool
Whether this tab bar should automatically adjust the indicatorColor.
final
controller → TabController?
This widget's selection and animation state.
final
dividerColor → Color?
The color of the divider.
final
dividerHeight → double?
The height of the divider.
final
dragStartBehavior → DragStartBehavior
Determines the way that drag start behavior is handled.
final
enableFeedback → bool?
Whether detected gestures should provide acoustic and/or haptic feedback.
final
hashCode → int
The hash code for this object.
no setterinherited
indicator → Decoration?
Defines the appearance of the selected tab indicator.
final
indicatorColor → Color?
The color of the line that appears below the selected tab.
final
indicatorPadding → EdgeInsetsGeometry
The padding for the indicator.
final
indicatorSize → TabBarIndicatorSize?
Defines how the selected tab indicator's size is computed.
final
indicatorWeight → double
The thickness of the line that appears below the selected tab.
final
isScrollable → bool
Whether this tab bar can be scrolled horizontally.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
labelColor → Color?
The color of selected tab labels.
final
labelPadding → EdgeInsetsGeometry?
The padding added to each of the tab labels.
final
labelStyle → TextStyle?
The text style of the selected tab labels.
final
mouseCursor → MouseCursor?
The cursor for a mouse pointer when it enters or is hovering over the individual tab widgets.
final
onTap → ValueChanged<int>?
An optional callback that's called when the TabBar is tapped.
final
overlayColor → MaterialStateProperty<Color?>?
Defines the ink response focus, hover, and splash colors.
final
padding → EdgeInsetsGeometry?
The amount of space by which to inset the tab bar.
final
physics → ScrollPhysics?
How the TabBar's scroll view should respond to user input.
final
preferredSize → Size
A size whose height depends on if the tabs have both icons and text.
no setteroverride
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
splashBorderRadius → BorderRadius?
Defines the clipping radius of splashes that extend outside the bounds of the tab.
final
splashFactory → InteractiveInkFeatureFactory?
Creates the tab bar's InkWell splash factory, which defines the appearance of "ink" splashes that occur in response to taps.
final
tabAlignment → TabAlignment?
Specifies the horizontal alignment of the tabs within a TabBar.
final
tabHasTextAndIcon → bool
Returns whether the TabBar contains a tab with both text and icon.
no setter
tabs → List<Widget>
Typically a list of two or more Tab widgets.
final
textScaler → TextScaler?
Specifies the text scaling behavior for the Tab label.
final
unselectedLabelColor → Color?
The color of unselected tab labels.
final
unselectedLabelStyle → TextStyle?
The text style of the unselected tab labels.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<TabBar>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited