# 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`