# 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](https://docs.digia.tech/ui-building-blocks/widgets/scrolling-widgets/pinned-header) 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`