Summary - Custom render
- Flutter course
- Expert
- Lesson 15/39
- 4 min
Combine RenderBox, performLayout and paint to make a custom widget.
Summary - Custom render
To build a custom render widget, three pieces come together: extend RenderBox, compute size with performLayout, and draw with paint. Together they give Flutter's render system a custom object.
class ColorBox extends RenderBox {
@override
void performLayout() {
size = constraints.biggest;
}
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & size,
Paint()..color = Colors.green,
);
}
}Practice Define ColorBox
Define ColorBox as a RenderBox. In performLayout, set size = constraints.biggest. In paint, call context.canvas.drawRect(offset & size, Paint()..color = Colors.green). In main, create a ColorBox instance and print its runtimeType.
Starter code
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
// ColorBox sınıfını RenderBox olarak tanımla
// performLayout'ta size'ı constraints biggest ata
// paint'te context.canvas ile yeşil bir dikdörtgen çiz (offset & size)
void main() {
// ColorBox örneği al ve runtimeType yazdır
}Sample solution
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
class ColorBox extends RenderBox {
@override
void performLayout() {
size = constraints.biggest;
}
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & size,
Paint()..color = Colors.green,
);
}
}
void main() {
final box = ColorBox();
print(box.runtimeType);
}Expected output
ColorBox
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which three components come together to write a custom render object?
- State + setState + build
- Navigator + Route + MaterialPageRoute
- RenderBox + performLayout + paint Correct answer
- Widget + Element + BuildContext
Explanation: A custom render object is made by extending RenderBox, computing size with performLayout, and drawing with paint; Widget/Element/BuildContext are tree concepts.
2 drawRect call
context.canvas.____(offset & size, paint);context.canvas.drawRect(offset & size, paint);Explanation: For a rectangle, drawRect is used; drawCircle is for a circle, drawLine for a line, and drawPath for multi-segment shapes.
3 Custom render summary matches
| Term | Meaning |
|---|---|
RenderBox |
Custom render object |
performLayout |
Layout step |
paint |
Paint step |
Canvas |
Drawing tool |