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


---

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