Learn the foundation of Flutter's rendering layer. Master the primitives that paint every pixel on screen.
class MyRenderBox extends RenderBox { // Override to define your layout logic @override void performLayout() { size = constraints.biggest; } // Paint to the canvas at the given offset @override void paint(PaintingContext ctx, Offset offset) { ctx.canvas.drawRect( offset & size, Paint()..color = color, ); } }
With AI, you can outsource your knowledge, but not your understanding. Learn the fundamental behaviors of render objects with our guides.
Learn how render objects choose sizes and child positions with layout.
Read guide →Learn how render objects put pixels on the screen during paint, with canvas commands and layered effects.
Read guide →Learn how to build render objects with named child widgets.
Read guide →Ground your understanding with real render object implementations, including explanations of implementation decisions.
A render object that looks similar to a Nest thermostat. A child-less render object with a complicating painting and paint-aware hit detection.
See example →Render thousands of animated particles per frame, bypassing the widget tree overhead entirely.
See example →Charts, graphs, and heatmaps that render at 60fps with full gesture and hit-test support.
See example →Get help implementing specific render object methods with our API docs.
Calculates the size of this render object and positions all its children. Must set this.size before returning.
void — called by the framework during the layout phaseDraws the visual representation of this render object onto the composited layer. Called after layout completes.
void — uses context.canvas for direct drawing operationsDetermines whether a pointer event at position falls within this render object. Returns true to claim the event.
bool — true if the hit test is absorbed by this render object