Mastering Custom Slivers in Flutter
summary
Builds a working SliverExpansionTile implemented with the RenderSliver API, extending MultiChildRenderObjectWidget and a custom RenderSliver that overrides performLayout and paint, plus setupParentData and applyPaintTransform. Uses an AnimationController tied to a copied custom sliver expansion tile controller, a TapGestureRecognizer for taps, per-child parentData offsets, border-radius clipping and a rotation transition for the trailing arrow. Demo runs inside a CustomScrollView, floating action buttons programmatically expand/collapse, and the widget behaves as expected in the demo.
AI-written summary · about
chapters (19)
- 0:00Custom slivers in Flutter
- 1:06Flutter rendering system
- 2:13Extending render objects
- 3:37Sliver expansion tile demo
- 5:43Render sliver class
- 7:10Managing children data
- 8:41Sliver constraints
- 10:04Sliver geometry
- 11:32Laying out children in performLayout
- 14:05Painting children
- 16:17Coordinate transforms
- 17:00Testing children
- 17:43Touch events
- 18:46Custom controller
- 20:54Stateful wrapper
- 21:57Final sliver expansion tile
- 23:07Using custom sliver
- 24:15Final result demo
- 25:38Closing & Q&A
related talks
40mConquering RenderSliver: Harnessing Power, Overcoming Fear
24mThe Sacred Scrolls: Crafting Your Own Slivers
55mSliver in Flutter, or How Scrolling Works
29mThe Widget Lifecycle: Understanding Flutter's Rendering Pipeline
17mFlutter Widgets Probably Haven’t Heard Of
34mFrom Plug-and-Play to Fully Custom
51mFlutter: How Widgets Work
35mHow Custom RenderObjects can make your life easier