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.

The Refresh Indicator widget provides pull-to-refresh functionality for scrollable content.

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.

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

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

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.

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