Canvas ve Paint
- Flutter kursu
- İleri seviye
- Ders 53/69
- 4 dk
Canvas ve Paint ile çizgi, daire ve dikdörtgen çizmeyi öğrenirsin.
Canvas ve Paint
Canvas, üzerine çizim yaptığın yüzeydir; Paint ise fırçadır ve renk, kalınlık gibi özellikleri taşır. Bir daire çizmek için canvas.drawCircle'a merkez nokta, yarıçap ve bir Paint verirsin.
final paint = Paint()
..color = Colors.red
..style = PaintingStyle.fill;
canvas.drawCircle(Offset(50, 50), 40, paint);Paint stilleri
Paint'in style özelliği PaintingStyle.fill ile içi boyar, PaintingStyle.stroke ile yalnızca kenarı çizer. strokeWidth kenar kalınlığını belirler. Aynı canvas üzerinde birden fazla Paint kullanabilirsin.
final kenar = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 3;
canvas.drawRect(rect, kenar);Uygulama Kırmızı dolu daire çiz
CirclePainter sınıfında paint metodu yaz. Kırmızı dolu bir daire çiz (merkez 50,50, yarıçap 30). main içinde painter örneğini alıp tipini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// CirclePainter sınıfını tanımla
void main() {
// CirclePainter örneğini al ve tipini yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class CirclePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.red
..style = PaintingStyle.fill;
canvas.drawCircle(const Offset(50, 50), 30, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
void main() {
final painter = CirclePainter();
print(painter.runtimeType);
}Beklenen çıktı
CirclePainter
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi geçerli bir drawCircle çağrısıdır?
- canvas.drawCircle(Colors.red, 40, paint)
- canvas.drawCircle(40, Offset(50, 50), paint)
- canvas.drawCircle(Offset(50, 50), 40, paint) Doğru cevap
- canvas.drawCircle(paint, Offset(50, 50), 40)
Açıklama: drawCircle'ın imzası drawCircle(Offset c, double radius, Paint paint) şeklindedir; önce merkez, sonra yarıçap, en son Paint verilir.
2 drawCircle'a Paint ver
canvas.drawCircle(Offset(50, 50), 40, ____);canvas.drawCircle(Offset(50, 50), 40, paint);Açıklama: drawCircle üçüncü parametre olarak Paint nesnesi bekler; Color doğrudan verilemez.
3 Canvas ve Paint eşleşmeleri
| Kavram | Anlamı |
|---|---|
Canvas |
Çizim yüzeyi |
Paint |
Fırça özellikleri |
drawCircle |
Daire çizer |
PaintingStyle.fill |
İçi dolu boya |