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.

Smart Scroll View usually works together with Smart Scroll Group (as its child) and Pinned Header (inside the group) to create advanced scrolling layouts.

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 for detailed usage

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

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.

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

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.

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