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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/navigation-widgets/tab-controller.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.