What is RenderObject?
- Flutter course
- Expert
- Lesson 11/39
- 4 min
Build a render object from scratch with RenderObject.
What is RenderObject?
RenderObject is the basic unit of drawing in Flutter; it computes size with layout and draws to the screen with paint. To write a custom render object from scratch, you extend RenderObject and override paintBounds and performLayout; paint is also added for drawing.
class MyRender extends RenderObject {
@override
Rect get paintBounds => Rect.zero;
@override
void performLayout() { /* size */ }
@override
void paint(PaintingContext context, Offset offset) { /* drawing */ }
}Layout vs paint
layout determines the size using the constraints coming from the parent; paint performs drawing using the computed size. Layout always runs before paint.
Practice Define a RenderObject
Define MyRender as a RenderObject. Override paintBounds to return Rect.zero, and override performLayout and paint with empty bodies. In main, create a MyRender instance and print its runtimeType.
Starter code
import 'package:flutter/rendering.dart';
// MyRender sınıfını RenderObject olarak tanımla
// gerekli getter ve metodları override et (paint bounds, layout, paint)
void main() {
// MyRender örneği al ve runtimeType yazdır
}Sample solution
import 'package:flutter/rendering.dart';
class MyRender extends RenderObject {
@override
Rect get paintBounds => Rect.zero;
@override
void performLayout() {
// layout
}
@override
void paint(PaintingContext context, Offset offset) {
// paint
}
}
void main() {
final render = MyRender();
print(render.runtimeType);
}Expected output
MyRender
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which are overridden when extending RenderObject?
- initState and build
- createElement and mount
- paintBounds and performLayout Correct answer
- createState and dispose
Explanation: Since RenderObject is abstract, the paintBounds getter and performLayout method must be overridden; paint is optional.
2 Extend RenderObject
class MyRender extends ____ {class MyRender extends RenderObject {Explanation: For a custom render object, RenderObject is extended; Widget is abstract definition, Element is the binder, and State is specific to StatefulWidget.
3 RenderObject matches
| Term | Meaning |
|---|---|
RenderObject |
Drawing unit |
layout |
Pre-draw measurement |
paint |
Screen drawing |
performLayout |
Layout trigger |