NestedScroll

The NestedScroll widget is a scroll container that links the header area and the body area so they scroll as one.
Use it for screens where the list below keeps scrolling while the header at the top collapses or stays pinned.

info

This widget is locked on the Free plan and available on the Pro and Enterprise plans.

Definition and role

The NestedScroll widget connects the outer scroll and the inner scroll into a single gesture. Children designated as header slivers go into the header area at the top, and the remaining children go into the body — so the body picks up scrolling once the header collapses.

• Category: Layouts
• Scroll direction: vertical (default) or horizontal
• Supports pinned headers and floating headers

Features

Feature	Description
Linked header and body scrolling	Handles the outer header area and the inner body area as one continuous scroll.
Scroll direction	Set vertical or horizontal with scrollDirection, and flip the direction with reverse.
Floating header	Turn on floatHeaderSlivers and the header appears immediately when you scroll back.
Scroll events	Run actions when scrolling starts, updates, stops, and reaches the bottom.
Programmatic control	Move the scroll position to the top or the bottom from a script.

How to use

1. Open the Layouts category in the left widget palette.
2. Drag and drop the NestedScroll item onto the canvas.
3. Place the children you want as the header and as the body inside it.
4. In the property panel on the right, set the scroll behavior with scrollDirection, reverse, and the other properties.
5. Attach actions to scroll events such as onStartScroll and onScrollEnd if needed.

Properties

Property	Description	Default	Value / type
scrollDirection	Scroll direction	Vertical (vertical)	horizontal, vertical
reverse	Flips the scroll direction	false	True/false
floatHeaderSlivers	Shows the header immediately when you scroll back	false	True/false
clipBehavior	How content that overflows the area is clipped	hardEdge	none, hardEdge, antiAlias, antiAliasWithSaveLayer
dragStartBehavior	The point at which a drag scroll starts	start	down, start
restorationId	Identifier used to restore the scroll position	Not set	String

Notes and tips

tip

The header area and the body area are split by how you place the children. A child designated as a header sliver becomes the header at the top, and the remaining children are treated as the body.

warning

Nesting another NestedScroll inside a NestedScroll is not supported.

Learn more

tip

For the full set of Widget Controls (Property, Method, Event) that let you drive this widget from a script, visit NestedScroll Widget Control.