That's how we scroll in Flutter
summary
Hands-on workshop that teaches building custom render sliver widgets in Flutter using the repo github.com/widgets/custom-scroll-workshop and live code. It shows concrete use of sliver inputs and outputs—sliver constraints, sliver geometry—and mutates layoutExtent, paintExtent, cacheExtent and scrollExtent to make a carousel that grows items toward the center. Paint-order and overlap problems appear; paint transforms don’t fire so the workshop wraps children in a RenderProxyBox and uses pushTransform to achieve the visual skew, and the custom carousel works.
AI-written summary · about
chapters (15)
- 0:00Workshop introduction
- 1:51Workshop setup and helpers
- 3:00Workshop structure overview
- 5:51What are slivers
- 8:40Render objects and slivers
- 13:21Repo setup and demo
- 21:03Custom sliver implementation
- 30:32Interactive exercise
- 37:01Basic carousel solution
- 42:01Manipulating layout extent
- 47:52Changing paint order
- 50:20Adjusting scroll extent
- 52:27Modifying paint origin
- 56:45Applying transformations
- 1:01:10Final demo and summary
related talks
40mConquering RenderSliver: Harnessing Power, Overcoming Fear
55mSliver in Flutter, or How Scrolling Works
35mUnder the Hood of ScrollViews
38mBuilding scrolling experiences in Flutter
43mPerformant Scrolling Layouts With Slivers
47mLive-Coding Custom Widgets with Simon
17mFlutter Widgets Probably Haven’t Heard Of
47mAnimations in Flutter