paint metodu
- Flutter kursu
- Uzman seviye
- Ders 14/39
- 4 dk
paint metodu ile çizim yapmayı öğrenirsin.
paint metodu
paint metodu, render nesnesini ekrana çizer. İki parametre alır: PaintingContext context çizim bağlamını, Offset offset üst-sol köşenin konumunu verir. Çizim için context.canvas kullanılır.
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & const Size(50, 50),
Paint()..color = Colors.blue,
);
}context.canvas
PaintingContext, çizim bağlamını yönetir; context.canvas ile Canvas'a erişirsin. offset, üst ağaçtaki konumu belirtir; çizim koordinatları buna göre kaydırılır.
Uygulama RectBox tanımla
RectBox adında bir RenderBox tanımla. performLayout'ta size = constraints.constrain(const Size(100, 50)) ata. paint'te context.canvas.drawRect çağır: rect offset & const Size(100, 50), paint Paint()..color = Colors.blue. main'de RectBox örneği al, runtimeType yazdır.
Başlangıç kodu
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
// RectBox sınıfını RenderBox olarak tanımla
// performLayout'ta size'ı 100x50 olarak constrain et
// paint'te context.canvas ile mavi bir dikdörtgen çiz (offset ve Size(100,50))
void main() {
// RectBox örneği al ve runtimeType yazdır
}Örnek çözüm
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
class RectBox extends RenderBox {
@override
void performLayout() {
size = constraints.constrain(const Size(100, 50));
}
@override
void paint(PaintingContext context, Offset offset) {
context.canvas.drawRect(
offset & const Size(100, 50),
Paint()..color = Colors.blue,
);
}
}
void main() {
final box = RectBox();
print(box.runtimeType);
}Beklenen çıktı
RectBox
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 paint metodunun imzası nedir?
- void paint(Widget w)
- void paint(PaintingContext context, Offset offset) Doğru cevap
- void paint(BuildContext ctx)
- void paint(Paint p)
Açıklama: paint imzası void paint(PaintingContext context, Offset offset)'tir; context.canvas çizim yüzeyini, offset üst-sol köşeyi verir.
2 context.canvas kullan
context.____.drawRect(rect, paint);context.canvas.drawRect(rect, paint);Açıklama: PaintingContext'in canvas getter'ı çizim yüzeyini döner; painter, brush ve surface PaintingContext üzerinde özellik değildir.
3 paint metodu eşleşmeleri
| Kavram | Anlamı |
|---|---|
paint |
Çizim metodu |
context |
Çizim bağlamı |
offset |
Üst-sol köşe konumu |
canvas |
Çizim yüzeyi |