Live-Coding Custom Widgets with Simon
summary
Live codes a custom infinite canvas widget that only builds on-screen children, claiming ~470 lines of example code and a public repo at github.com/slightfoot/stack_canvas. Uses Flutter's RenderObject Element and Widget trees with a controller that tracks an origin offset, layout callbacks (the same mixin as LayoutBuilder), parentData positioning, and the framework's updateChildren diffing handles tree changes to detach offscreen widgets. Demo runs but bounding-box and fling features are work-in-progress. Only visible widgets stay in the widget tree.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:30Custom canvas challenge
- 5:51Stack canvas implementation
- 10:24Flutter’s three trees
- 14:17Building widgets during layout
- 22:21Custom render object walkthrough
- 25:50Custom render objects vs paint
- 28:17Widget recycling and memory
- 31:03Bounds and scrolling limits
- 43:33Conclusion
related talks
01h 03mThat's how we scroll in Flutter
50mFlutter: The Wizards of Widgets
38mBuilding scrolling experiences in Flutter
37mFlutter Development
51mFlutter: How Widgets Work
01h 13mFlutter — live coding declarative UI
50mBuild a multiplayer drawing experience with full-stack Dart
32mCode Meets Art: Flutter for Creative Coding