All 7 Flutter Slivers & Custom Scroll Effects questions
More in Flutter Slivers & Custom Scroll Effects
What is a sliver in Flutter, and how does using a CustomScrollView built from several individual slivers let you create a genuinely more complex, custom scrolling effect than a simple regular ListView could achieve on its own? What is SliverAppBar, and how does its expandedHeight property together with FlexibleSpaceBar let you create the popular collapsing header effect commonly seen in many modern apps? What is the difference between SliverList and SliverGrid, and how do you actually properly combine both of them together within exactly the same single CustomScrollView? How can you properly implement infinite scrolling or pagination within a sliver based scroll view, automatically loading additional new content as a user actively scrolls further down toward the very bottom of the currently loaded list? How do you properly build a genuinely fully custom sliver by directly extending RenderSliver, for a genuinely very specific custom scroll effect not already covered by any of Flutter's own existing built in sliver widgets? What performance considerations become genuinely important when building a genuinely very complex sliver based scrolling screen containing several different sliver types together, such as multiple grids, lists, and persistent headers all combined?
Advertisement
Back to results for “Flutter Slivers & Custom Scroll Effects”
Flutter › Flutter Slivers & Custom Scroll Effects

How does SliverPersistentHeader let you create a genuinely persistent, pinned section header that remains visibly fixed and stuck at the very top of the screen while its own related content continues scrolling normally underneath it?

Intermediate

Answer

SliverPersistentHeader lets you define a genuinely custom header that can either remain properly pinned and fixed at the very top of the visible screen as a user continues scrolling, or alternatively float back into view again as the user actively scrolls back upward, and implementing it requires providing a custom SliverPersistentHeaderDelegate that properly defines the header's own minimum and maximum allowed height along with exactly how it should actually visually build and render itself at any given specific point throughout that particular scrolling interaction.
SliverPersistentHeader(
  pinned: true,
  delegate: MyStickyHeaderDelegate(minHeight: 60, maxHeight: 60, child: CategoryHeader()),
)
Real-world example A contacts app displays a persistent pinned alphabet letter header, such as a large letter B, that remains properly fixed and visible at the very top of the screen for as long as the user continues actively scrolling through contacts whose names genuinely begin with that exact same specific letter.

Common follow-ups: How do you properly implement the required shouldRebuild method on a SliverPersistentHeaderDelegate?;What is the specific difference between a pinned header and a floating header?

Custom Painters & CustomPaint;Layout Widgets (Row Column Stack Container)
All 7 Flutter Slivers & Custom Scroll Effects questions