Özet - Özel render
- Flutter kursu
- Uzman seviye
- Ders 15/39
- 4 dk
RenderBox, performLayout ve paint'i birleştirerek özel widget yaparsın.
Özet - Özel render
Bir özel render widget yapmak için üç parça birleşir: RenderBox'ı extend et, performLayout ile boyut hesapla, paint ile çiz. Bu üçü birlikte Flutter'ın render sistemine özel bir nesne kazandırır.
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,
);
}
}Uygulama ColorBox tanımla
ColorBox adında bir RenderBox tanımla. performLayout'ta size = constraints.biggest ata. paint'te context.canvas.drawRect(offset & size, Paint()..color = Colors.green) çağır. main'de ColorBox örneği al, runtimeType yazdır.
Başlangıç kodu
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
}Örnek çözüm
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);
}Beklenen çıktı
ColorBox
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Özel render nesnesi yazmak için hangi üç bileşen birleşir?
- State + setState + build
- Navigator + Route + MaterialPageRoute
- RenderBox + performLayout + paint Doğru cevap
- Widget + Element + BuildContext
Açıklama: Özel render nesnesi RenderBox'ı extend edip performLayout ile boyut hesaplayıp paint ile çizerek yapılır; Widget/Element/BuildContext ağaç kavramlarıdır.
2 drawRect çağrısı
context.canvas.____(offset & size, paint);context.canvas.drawRect(offset & size, paint);Açıklama: Bir dikdörtgen için drawRect kullanılır; drawCircle daire, drawLine çizgi, drawPath ise çoklu şekil için çağrılır.
3 Özel render özet eşleşmeleri
| Kavram | Anlamı |
|---|---|
RenderBox |
Özel render nesnesi |
performLayout |
Layout adımı |
paint |
Çizim adımı |
Canvas |
Çizim aracı |