Performant Scrolling Layouts With Slivers
summary
Shows concrete swaps and numbers: a SingleChildScrollView with a Column and 200 cards renders at ~30 ms per frame, replacing it with ListView builder drops to ~3 ms. Demonstrates using CustomScrollView with SliverToBoxAdapter, SliverList and SliverGrid to avoid multiple nested viewports, and replaces heavy lists with SliverFixedExtentList or PrototypeExtent to reduce jank (example 100 ms → 4 ms). Builds sticky headers using SliverAppBar plus a sliver main axis group and confirms it works.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:47Flutter UI rendering
- 8:36Standard layout fails
- 11:06How scroll works
- 15:43Limitations of scroll views
- 16:03Slivers protocol
- 20:39Custom ScrollView and slivers
- 23:28Single Child ScrollView pitfalls
- 25:14Live demo
- 27:01Fixing Single Child ScrollView
- 30:38Optimizing nested scrolls
- 35:20Advanced sliver optimizations
- 38:14Sticky headers with slivers
- 42:52Summary
