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