# 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-3e0dd7d63922880b50f836f4c8439b23380baa3b%2Fsmart_scroll_group.gif?alt=media" 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