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

{% embed url="<https://www.youtube.com/watch?v=DCkob8F_pwI>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=DCkob8F_pwI>

### **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](https://api.flutter.dev/flutter/material/TabBar-class.html).

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


---

# 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-bar.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.