Tab Bar

The Tab Bar widget displays a horizontal row of tabs that users can tap to switch between different sections or views. It’s usually used together with:

• Tab Controller → manages which tab is selected

• Tab View Content → shows the content for the selected tab

Think of it as the navigation strip at the top of a tabbed interface.

Use Cases

Use a Tab Bar when you want to:

• Split a screen into multiple sections without navigating to different pages

  • Example: Overview, Details, Reviews on a product page

• Provide a quick way to switch content in-place

  • Example: Chats, Groups, Calls

• Organize related content under categories

  • Example: Trending, Latest, Saved

• Build a multi-tab dashboard

  • Example: Analytics, Reports, Settings

It’s ideal when:

• All sections are closely related

• Users need to switch frequently between them

• You want fast switching without full page transitions

Core Concepts

• Visual Tab Strip

  • The Tab Bar is purely the visual + interactive row of tabs.

  • It doesn’t store state itself; selection is usually managed by the Tab Controller.

• Selected vs Unselected Tabs

  • You can define different templates:

    • selectedWidget → how the active tab looks

    • unselectedWidget → how inactive tabs look

  • This lets you style active tabs with:

    • Bold text

    • Different colors

    • Icons or backgrounds

• Scrollable vs Fixed Tabs

  • With tabBarScrollable.value, the Tab Bar can:

    • Stay fixed (tabs share the available width), or

    • Be scrollable horizontally if there are many tabs.

• Indicator & Divider

  • Indicator: A line/marker showing which tab is currently selected.

    • Controlled by indicatorColor, indicatorWeight, indicatorSize.

  • Divider: A line below the Tab Bar separating it from content.

    • Controlled by dividerColor, dividerHeight.

• Spacing & Layout

  • labelPadding → Space around each tab label.

  • tabBarPadding → Space around the whole tab row.

Properties

Property	Description
tabBarScrollable.value	If true, the Tab Bar can scroll horizontally when there are more tabs than can fit on the screen. If false, tabs are distributed within available width.
tabBarScrollable.tabAlignment	Controls how tabs are aligned within the scrollable area (e.g., aligned to start, centered).
labelPadding	Padding around each tab’s label (text/icon), controlling how compact or spacious each tab feels.
indicatorColor	Color of the indicator that highlights the currently selected tab.
indicatorWeight	Thickness of the indicator line (e.g., thicker for more emphasis).
dividerColor	Color of the divider line displayed below the Tab Bar.
dividerHeight	Height/thickness of the divider line below the Tab Bar.
indicatorSize	Defines how wide the indicator is — for example, under the whole tab or just under the label.
tabBarPadding	Padding applied around the entire Tab Bar area, controlling its spacing from surrounding content.

Children of Tab Bar

Slot	Description
selectedWidget	Widget template used for the active/selected tab. Use this to visually highlight the current tab (e.g., bold text, colored background, icon).
unselectedWidget	Widget template used for inactive tabs. Usually more subtle styling compared to the selected tab.

These templates are applied for each tab depending on its selected state, letting you create fully custom tab designs.

📚 Learn More: To understand the underlying Flutter implementation, see the Flutter TabBar documentation.

Default Properties

Layout

The Tab Bar widget supports the following layout properties:

• width

• height

• padding

• margin

Alignment

The Tab Bar widget supports the following alignment property:

• align

Visibility

The Tab Bar widget supports the following visibility property:

• visible