The StickyHeader widget keeps a header visible while users scroll through content below it. For example, a search bar can stay in view while users browse a list of results.

The StickyHeader widget has two sections:

• StickyHeader Header: Holds the widget that remains visible while the content scrolls, such as a search bar or title.
• StickyHeader Content: Holds the content below the header, such as a ListView or GridView.

Scrollable parent

The Column or ListView containing the StickyHeader must handle the main scrolling. Turn on Primary for that widget. If you add another ListView or GridView inside StickyHeader Content, turn off Primary for the inner one.

The inner list or grid may still scroll separately. To make an inner ListView scroll with the rest of the page, turn on Shrink Wrap and choose a non-scrolling Scroll Physics option for it.

Adding a StickyHeader

1. Add a Column or ListView to the page. Turn on Primary for this Column or ListView so it handles scrolling. If you use a Column, also turn on Scrollable.
2. From Base Elements, add a StickyHeader inside that Column or ListView.
3. Add the widget you want to keep visible inside StickyHeader Header.
4. Add the content that users will scroll through inside StickyHeader Content. You can use widgets such as a ListView or GridView to display a collection of items.

The following demo shows a search bar above a user list: