# Smart Scroll View

The **Smart Scroll View** is used to make long content **scrollable intelligently**—often combining multiple scrollable areas (headers, lists, grids, sections) into **one smooth scrolling experience**.\
It can also help with things like sticky headers, collapsing areas, or coordinated scrolling.

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

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

{% hint style="info" %}
Smart Scroll View usually works together with **Smart Scroll Group** (as its child) and **Pinned Header** (inside the group) to create advanced scrolling layouts.
{% endhint %}

### Use Cases

Use **Smart Scroll View** when you want:

* **Single smooth scroll for complex pages**
  * A screen with a banner → tabs → lists → sections, all scrolling together
  * Dashboard-style pages with multiple content blocks that should scroll as one
* **Sticky / collapsing areas**
  * A header that shrinks or sticks to the top while the user scrolls
  * Filters or tab bars that stay pinned while the content below scrolls
* **Mixed content in one scroll**
  * Text sections, images, carousels, and lists on the same page
  * Landing/marketing pages with multiple vertically stacked modules
* **Better UX than nested scrolls**
  * Avoid “scroll inside scroll” issues (e.g., ListView inside ScrollView)
  * Make scrolling feel natural and unified for the user

### Core Concepts

**Unified Scrolling**

Combines multiple child widgets (lists, grids, static sections) into one scrollable flow, so the user scrolls the entire page with a single gesture.

* Smart Scroll View is the **main scroll container**
* **Smart Scroll Group** is typically used as its child to hold all scrollable content in a structured way

**Scroll-Aware Behavior**

Can react to scroll position to:

* Pin headers or filters
* Trigger animations (e.g., fade/scale header)
* Show/hide UI (like a “Back to top” button)

When used with **Pinned Header**, Smart Scroll View ensures:

* Header stays visible when you scroll
* Content scrolls underneath the pinned area
* Transitions are smooth and coordinated

**Layout Flexibility**

Lets you mix:

* Static content (text, banners)
* Dynamic content (lists, grids)
* Special sections (carousels, cards)

All managed in a way that avoids scroll conflicts.

This is usually done by:

* Wrapping content inside a **Smart Scroll Group**
* Adding **Pinned Header** at the top of that group when you need a sticky section

#### **Data Source**

The Smart Scroll View widget has a **Data Source** property that can be used to dynamically generate children widgets. You can input either static data or dynamic data using expressions.

This is useful for:

* Creating repeated sections (cards, rows, list items)
* Binding dynamic content (from APIs, local data, etc.)
* Building complex scrollable layouts without manually duplicating widgets

### Relationship with Smart Scroll Group & Pinned Header

Smart Scroll View is designed to work closely with:

* **Smart Scroll Group (Child of Smart Scroll View)**
  * Acts as the main container for all scrollable content inside Smart Scroll View
  * Groups multiple widgets/sections into one logical scrollable block
  * Ensures that mixed content (headers, lists, banners, cards) scrolls smoothly as a single experience
* **Pinned Header (Child inside Smart Scroll Group)**
  * Placed at the top of a Smart Scroll Group
  * Stays fixed or "pinned" at the top while the rest of the content scrolls
  * Ideal for section titles, filters, tabs, or important CTAs that should always remain visible
  * See [Pinned Header documentation](/ui-building-blocks/widgets/scrolling-widgets/pinned-header.md) for detailed usage

{% hint style="success" %}
**Performance Tip:**

* `Smart Scroll View` = main scroll container
* `Smart Scroll Group` = scrollable content section inside it
* `Pinned Header` = sticky element inside the group that stays visible during scroll
  {% endhint %}

### **Properties**

| Property          | Description                                                           |
| ----------------- | --------------------------------------------------------------------- |
| `controller`      | An expression to control the scroll position of the view.             |
| `isReverse`       | If `true`, the scroll view scrolls in the opposite direction.         |
| `scrollDirection` | The direction in which the view scrolls (`Vertical` or `Horizontal`). |
| `allowScroll`     | If `true`, the view will be scrollable.                               |
| `dataSource`      | Data source for dynamically generating repeated child widgets.        |

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

### Supported Children

Smart Scroll View supports **all widgets** as children, but works best with sliver-based widgets for optimal performance and scrolling behavior.

**Recommended widgets for Smart Scroll View:**

* **Pinned Header** - Creates sticky headers that remain visible during scrolling
* **Smart Scroll Group** - Groups multiple scrollable sections together
* **Any other widgets** - Smart Scroll View can contain any Digia UI widgets

{% hint style="warning" %}
**Important Restrictions:**

* **Pinned Header** and **Smart Scroll Group** can only be used inside Smart Scroll View. Using them elsewhere will result in errors or unexpected behavior.
* These widgets require the sliver-based scrolling system that Smart Scroll View provides.
  {% endhint %}

### Default Properties

#### Layout

The Smart Scroll View widget supports the following layout properties:

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

#### Alignment

The Smart Scroll View widget supports the following alignment property:

* `align`

#### Visibility

The Smart Scroll View 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/scrolling-widgets/smart-scroll-view.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.