# Tab View Content

**Tab View Content** is the widget that **shows the actual content** for the currently selected tab.\
It works together with:

* **Tab Controller** → manages which tab is selected
* **Tab Bar** → lets the user switch tabs

Whenever the selected tab changes, Tab View Content updates to display the **corresponding screen/content**.

### **Use Cases**

You use **Tab View Content** when:

* You have multiple **sections of content** under different tabs, such as:
  * Product page → `Overview`, `Details`, `Reviews`
  * Profile → `Posts`, `About`, `Activity`
  * Dashboard → `Summary`, `Analytics`, `Logs`
* You want users to **switch between content** without leaving the screen.
* You want each tab to have:
  * Its own scrollable content
  * Its own UI/state
  * Smooth transitions between sections

It’s ideal for building **multi-tab experiences** where each tab has a distinct layout or data.

### **Core Concepts**

* **Content Area for Tabs**
  * Tab View Content is essentially the **page area below the Tab Bar**.
  * It listens to the **Tab Controller’s selected index** and shows the relevant tab’s content.
* **Scroll Behavior**
  * With `isScrollable`, you can decide if each tab’s content is scrollable vertically (e.g., long lists, forms, feeds).
* **State Preservation**
  * `keepTabsAlive` ensures each tab’s state (scroll position, form inputs, etc.) is **preserved** when you switch tabs.
  * Without it, content might rebuild/reset when you navigate away from a tab.
* **Viewport Fraction**
  * `viewportFraction` controls **how much of the screen** each tab’s page occupies.
  * Mostly useful for **paged / swipe-like layouts**, where you might show a portion of the next/previous tab for visual hints.

### Properties

| Property           | Description                                                                                                                                                                                          |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isScrollable`     | If `true`, the content within each tab can scroll (e.g., for long lists or detailed pages). If `false`, content stays fixed within the available space.                                              |
| `keepTabsAlive`    | If `true`, the state of each tab's content is preserved when it goes off-screen. This helps keep scroll position, user input, and loaded data intact when switching between tabs.                    |
| `viewportFraction` | Defines what fraction of the viewport each tab's content should use. A value of `1.0` typically means each tab fills the full width; values less than `1.0` can show a peek of adjacent tab content. |

> 📚 **Learn More**: To understand the underlying Flutter implementation, see the [Flutter TabBarView documentation](https://api.flutter.dev/flutter/material/TabBarView-class.html).

### Default Properties

#### Layout

The Tab View Content widget supports the following layout properties:

* `width`
* `height`
* `padding`
* `margin`

#### Alignment

The Tab View Content widget supports the following alignment property:

* `align`

#### Visibility

The Tab View Content widget supports the following visibility property:

* `visible`