Draw undrawable with your custom RenderBox!
summary
Builds a working hexagonal button by implementing a custom RenderBox that overrides computeDryLayout, performLayout, paint, hitTest, handleEvent and describeSemantics. Uses a RenderShiftBox base, draws a Path for the hexagon, renders a child via super.paint, and wires raw pointer events into a GestureRecognizer so taps and screen‑reader activation work. The prototype ends up as ~200 lines of code, renders correctly and supports hit testing and accessibility, but is complex and only worth it when widgets and composition cannot.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 0:57What is RenderBox
- 4:30Design
- 8:20Widgets
- 10:27RenderBox
- 13:44RenderBox Widget
- 24:44Heat Test
- 31:02Accessibility
- 34:26Summary
related talks
35mHow Custom RenderObjects can make your life easier
35mRenderObject layer advantages without writing any RenderObject
15mBuilding a desktop design language with Flutter
39mCreating a UI Toolkit From Scratch
36mJetpack Compose: Drawing without pain and recomposition
34mMastering CustomPainter: Going Beyond Widgets in Flutter
28mBuilding a Custom React Renderer
26mMastering Custom Slivers in Flutter