Tab Controller

The Tab Controller is a state management widget that coordinates a Tab Bar (the row of tabs) and a Tab View (the content for each tab). It keeps track of which tab is currently selected and ensures that the correct content screen is shown for that tab.

You can think of it as the “brain” behind tab navigation.

Use Cases

Use a Tab Controller whenever your screen has multiple sections that users can switch between using tabs, for example:

• 🛒 E-commerce

  • Product page with tabs like: Overview, Details, Reviews

• 👤 Profile / Account

  • Tabs such as: Posts, About, Activity

• 📊 Dashboard

  • Tabs like: Analytics, Reports, Settings

• 📱 Content apps

  • Chats, Status, Calls

  • Trending, Latest, Saved

Typical scenarios:

• One Tab Controller wrapping:

  • a Tab Bar at the top

  • a Tab View below containing content for each tab

• Switching tabs automatically updates the Tab View without navigation to new screens, making it ideal for in-place switching.

Core Concepts

• Selected Tab State

  • The Tab Controller maintains which tab is active (by index).

  • When the user taps a tab in the Tab Bar:

    • The Tab Controller updates its selected index.

    • The corresponding page/content is shown in the Tab View.

• Link Between Tab Bar & Tab View

  • The Tab Bar handles user input (tap on a tab).

  • The Tab View handles displaying content for each tab.

  • The Tab Controller keeps them in sync, so they always reflect the same tab selection.

• Tab Coordination

  • If the selected tab changes programmatically (e.g., via action), the Tab Controller:

    • Updates the Tab Bar’s active tab.

    • Updates the Tab View to show the correct screen.

• Consistent UX

  • Using a Tab Controller ensures:

    • Smooth, predictable tab switching.

    • No need to manually handle which content should be visible.

Properties

Property	Description
dynamicList	Data list used to generate tabs and their content.
initialIndex	Zero-based index of the tab selected by default.
onTabChange	Action triggered when the selected tab changes.

Default Properties

Layout

The Tab Controller widget supports the following layout properties:

• width

• height

• padding

• margin

Alignment

The Tab Controller widget supports the following alignment property:

• align

Visibility

The Tab Controller widget supports the following visibility property:

• visible