Challenge 1
- Flutter course
- Expert
- Lesson 36/39
- 3 min
Build a layout widget from scratch with RenderBox.
Layout from scratch with RenderBox
RenderBox is the lowest-level object in Flutter responsible for layout and painting. In performLayout you set the size property; in paint you draw on the Canvas. By implementing these two methods you write a custom layout widget from scratch.
class ColorBox extends RenderBox {
final Color color;
ColorBox({required this.color});
@override
void performLayout() {
size = constraints.constrain(const Size(50, 50));
}
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & size,
Paint()..color = color,
);
}
}Practice Write ColorBox RenderBox
Write a RenderBox subclass named ColorBox. It has color and boxSize fields. In performLayout set size via constraints.constrain. In paint draw a rectangle. In main create an instance and print its color.
Starter code
import 'package:flutter/rendering.dart';
// ColorBox: RenderBox tabanlı sınıf
// color ve boxSize alanları
// Düzen metodunda boyutu kısıtlamalarla belirle
// Boyama metodunda tuvale köşe çiz
void main() {
// ColorBox oluştur ve color yazdır
}Sample solution
import 'package:flutter/rendering.dart';
class ColorBox extends RenderBox {
final Color color;
final double boxSize;
ColorBox({required this.color, required this.boxSize});
@override
void performLayout() {
size = constraints.constrain(Size(boxSize, boxSize));
}
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & Size(boxSize, boxSize),
Paint()..color = color,
);
}
}
void main() {
final box = ColorBox(color: const Color(0xFF0000FF), boxSize: 50);
print(box.color);
}Expected output
Color(0xff0000ff)
Practice LeafRenderObjectWidget wrapper
Write the ColorBox class again. Then write a LeafRenderObjectWidget subclass named ColorBoxWidget that takes color and boxSize parameters. Its createRenderObject method returns a ColorBox. In main create a ColorBoxWidget and print its boxSize.
Starter code
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
// ColorBox: RenderBox tabanlı (color ve boxSize)
// ColorBoxWidget: yaprak render widget'ı
// Render nesnesi üreten metodu ekle, ColorBox döndür
void main() {
// ColorBoxWidget oluştur ve boxSize yazdır
}Sample solution
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
class ColorBox extends RenderBox {
final Color color;
final double boxSize;
ColorBox({required this.color, required this.boxSize});
@override
void performLayout() {
size = constraints.constrain(Size(boxSize, boxSize));
}
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & Size(boxSize, boxSize),
Paint()..color = color,
);
}
}
class ColorBoxWidget extends LeafRenderObjectWidget {
final Color color;
final double boxSize;
const ColorBoxWidget({
super.key,
required this.color,
required this.boxSize,
});
@override
RenderObject createRenderObject(BuildContext context) {
return ColorBox(color: color, boxSize: boxSize);
}
}
void main() {
const w = ColorBoxWidget(color: Color(0xFF00FF00), boxSize: 100);
print(w.boxSize);
}Expected output
100.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does performLayout do?
- Draws to the screen
- Captures touch events
- Sets the RenderBox's size property Correct answer
- Builds the widget tree
Explanation: performLayout determines the render box's size based on incoming constraints; paint is a separate method.
2 size assignment
void performLayout() {
____ = constraints.constrain(const Size(50, 50));
}void performLayout() {
size = constraints.constrain(const Size(50, 50));
}Explanation: Inside performLayout the size property is set; this determines the render box's dimensions.
3 RenderBox parts
| Term | Meaning |
|---|---|
performLayout |
Sets the size property |
paint |
Draws on the canvas |
constraints |
Incoming layout constraints |
PaintingContext |
Provides the canvas |