Meydan okuma 1
- Flutter kursu
- Uzman seviye
- Ders 36/39
- 3 dk
RenderBox ile sıfırdan düzen widget'ı yazarsın.
RenderBox ile sıfırdan düzen
RenderBox, Flutter'da düzen ve boyamadan sorumlu en düşük seviye nesnedir. performLayout metodunda size özelliğini ayarlarsın; paint metodunda Canvas üzerine çizersin. Bu iki metodu uygulayarak sıfırdan özel düzen widget'ı yazarsın.
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,
);
}
}Uygulama ColorBox RenderBox yaz
ColorBox adında RenderBox alt sınıfı yaz. color ve boxSize alanları olsun. performLayout metodunda size'ı constraints.constrain ile ayarla. paint metodunda köşe çiz. main içinde bir örnek oluştur ve color yazdır.
Başlangıç kodu
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
}Örnek çözüm
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);
}Beklenen çıktı
Color(0xff0000ff)
Uygulama LeafRenderObjectWidget sarmalayıcı
ColorBox sınıfını tekrar yaz. Sonra ColorBoxWidget adında LeafRenderObjectWidget alt sınıfı yaz; color ve boxSize parametreleri alsın. createRenderObject metodu bir ColorBox döndürsün. main içinde bir ColorBoxWidget oluştur ve boxSize yazdır.
Başlangıç kodu
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
}Örnek çözüm
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);
}Beklenen çıktı
100.0
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 performLayout metodu ne yapar?
- Ekrana çizim yapar
- Dokunma olaylarını yakalar
- RenderBox'ın size özelliğini ayarlar Doğru cevap
- Widget ağacını oluşturur
Açıklama: performLayout, gelen constraints'e göre render box'ın size'ını belirler; paint ayrı bir metoddur.
2 size ataması
void performLayout() {
____ = constraints.constrain(const Size(50, 50));
}void performLayout() {
size = constraints.constrain(const Size(50, 50));
}Açıklama: performLayout içinde size özelliği ayarlanır; bu, render box'ın boyutunu belirler.
3 RenderBox parçaları
| Kavram | Anlamı |
|---|---|
performLayout |
size özelliğini ayarlar |
paint |
canvas üzerine çizer |
constraints |
gelen düzen kısıtları |
PaintingContext |
canvas sağlar |