# Smart Scroll Group

The **Smart Scroll Group** is a **container widget** that groups multiple scrollable sections (slivers) into a single logical scrolling unit within a **Smart Scroll View**.\
It acts as the main content organizer for complex scrolling layouts.

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

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

<figure><img src="/files/2eBJEJOohPIQE2v1OxoJ" alt="A hero image showing a refresh indicator with pull-to-refresh animation on a mobile screen." height="300"><figcaption><p>The Refresh Indicator widget provides pull-to-refresh functionality for scrollable content.</p></figcaption></figure>

{% hint style="info" %}
Smart Scroll Group works together with **Smart Scroll View** (as its parent) and **Pinned Header** (as its child) to create advanced scrolling layouts with sticky headers and coordinated scrolling.
{% endhint %}

### Core Concepts

**Sliver Grouping**

Smart Scroll Group uses Flutter's `SliverMainAxisGroup` to combine multiple slivers into a cohesive scrolling unit:

* **Slivers**: Special widgets optimized for scrolling (like `SliverList`, `SliverGrid`, `SliverAppBar`)
* **Main Axis Group**: Ensures all child slivers scroll together along the main axis
* **Unified Experience**: All content moves as one, preventing nested scroll conflicts

**Content Organization**

Typically contains:

* **Pinned Headers**: For sticky section titles or navigation
* **Scrollable Lists/Grids**: For dynamic content
* **Static Content**: Banners, cards, or other non-scrolling elements converted to slivers

**Parent-Child Relationship**

* **Parent**: Always placed inside a **Smart Scroll View**
* **Children**: Multiple slivers that should scroll together
* **Headers**: Can contain **Pinned Header** widgets for sticky behavior

### Relationship with Smart Scroll View & Pinned Header

Smart Scroll Group is designed to work closely with:

* **Smart Scroll View (Parent of Smart Scroll Group)**
  * Acts as the main scroll container that holds the Smart Scroll Group
  * Provides the overall scrolling behavior and physics
  * Manages the scroll controller and direction
* **Pinned Header (Child inside Smart Scroll Group)**
  * Placed at the top of scrollable content sections
  * Stays fixed or "pinned" at the top while other content scrolls
  * Ideal for section titles, filters, tabs, or important CTAs

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

* `Smart Scroll View` = main scroll container
* `Smart Scroll Group` = groups slivers into one scrollable unit
* `Pinned Header` = sticky element that stays visible during scroll
  {% endhint %}

### Properties

Smart Scroll Group inherits properties from its parent Smart Scroll View and doesn't have additional configurable properties of its own.

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

### Default Properties

#### Layout

The Smart Scroll Group widget supports the following layout properties:

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

#### Alignment

The Smart Scroll Group widget supports the following alignment property:

* `align`

#### Visibility

The Smart Scroll Group widget supports the following visibility property:

* `visible`

### Use Cases

Use **Smart Scroll Group** when you need to:

* **Group multiple scrollable sections**
  * Combine headers, lists, grids, and banners into one smooth scroll
  * Create dashboard-style layouts with multiple content blocks
* **Organize complex scrollable content**
  * Structure content with pinned headers and scrollable sections
  * Build landing pages with mixed content types
* **Create coordinated scrolling experiences**
  * Ensure all content scrolls together as one unified experience
  * Avoid "scroll inside scroll" conflicts


---

# 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-group.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.