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 the difference between SliverList and SliverGrid, and how do you actually properly combine both of them together within exactly the same single CustomScrollView? 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? 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 “Responsive UI”
Flutter › Flutter Slivers & Custom Scroll Effects

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?

Beginner

Answer

SliverAppBar is a genuinely specialized sliver specifically designed to work properly within a CustomScrollView, and setting its expandedHeight property to a value considerably larger than its normal standard app bar height, combined with using a FlexibleSpaceBar as its flexibleSpace, creates the now genuinely popular collapsing header effect where a large header image or title smoothly and gradually shrinks down as a user actively scrolls, eventually settling and properly collapsing into a genuinely much more compact, standard sized app bar once the user has scrolled sufficiently far down the overall page.
SliverAppBar(
  expandedHeight: 250,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    background: Image.network(coverImageUrl, fit: BoxFit.cover),
    title: Text('Product Name'),
  ),
)
Real-world example A product detail screen uses SliverAppBar to properly display a genuinely large, prominent product photo that smoothly and gradually shrinks and collapses into a compact standard app bar as the user actively scrolls further down to read the remaining detailed product description.

Common follow-ups: What does the pinned property specifically do on SliverAppBar?;What is the difference between the pinned, floating, and snap properties on SliverAppBar?

Custom Widgets & Reusable Components;Responsive & Adaptive UI Design
All 7 Flutter Slivers & Custom Scroll Effects questions