CustomPaint nedir?
- Flutter kursu
- İleri seviye
- Ders 51/69
- 4 dk
CustomPaint widget'ı ile özel çizim yapmayı öğrenirsin.
CustomPaint nedir?
CustomPaint, Flutter'da standart widget'larla yapılamayan serbest çizimler için kullanılan widget'tır. İçine bir painter ve opsiyonel bir size alır; çizim işini painter nesnesine bırakır. Bir child verirsen çizim onun arkasında görünür.
CustomPaint(
size: Size(100, 100),
painter: MyPainter(),
)Çizilen alan, size ile belirtilen boyuta yayılır.
child ve size ilişkisi
CustomPaint'a child verirsen çizim onun arkasında kalır ve size yoksayılır; child'ın boyutu kullanılır. Child yoksa size çizim boyutunu belirler.
CustomPaint(
painter: MyPainter(),
child: Container(width: 80, height: 80),
)Uygulama CustomPaint widget'ı oluştur
MyPainter sınıfı hazır verilir. main içinde 100x100 boyutlu, MyPainter() kullanan bir CustomPaint oluştur ve print ile tipini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
void main() {
// 100x100 CustomPaint oluştur ve tipini yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
void main() {
final widget = CustomPaint(
size: Size(100, 100),
painter: MyPainter(),
);
print(widget.runtimeType);
}Beklenen çıktı
CustomPaint
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 CustomPaint widget'ında gerçek çizimi kim yapar?
- size parametresi
- BuildContext
- painter parametresindeki nesne Doğru cevap
- child parametresindeki widget
Açıklama: Çizimi painter parametresine verilen CustomPainter nesnesi yapar; child yalnızca üstte durur, size ise alanı belirler.
2 painter parametresini ekle
CustomPaint(
size: Size(50, 50),
____: MyPainter(),
)CustomPaint(
size: Size(50, 50),
painter: MyPainter(),
)Açıklama: Çizimi yapacak nesne painter parametresine verilir; child üstteki widget, size ise alandır.
3 CustomPaint parçaları
| Kavram | Anlamı |
|---|---|
CustomPaint |
Serbest çizim widget'ı |
painter |
Çizimi yapan nesne |
size |
Çizim alanı boyutu |
child |
Çizimin üstündeki widget |