Bölüm 8 — Konu 38: `CustomPainter` / `Canvas`

Şimdiye kadar hep hazır widget'ları (Container, Icon, Image) birleştirerek arayüz kurduk. Bu ders, Flutter'ın kendi çizim motoruna doğrudan erişmeni sağlıyor — bir dairesel ilerleme çubuğu, özel bir grafik, ya da hazır widget'larla yapamayacağın herhangi bir şekli çizebilmeni.

#Neden CustomPainter? Hazır Widget'lar Yetmiyor mu?

Container, BoxDecoration, ClipPath gibi widget'larla çoğu basit şekli (dikdörtgen, daire, kenarlık) çizebilirsin. Ama şu durumlarda CustomPainter'a ihtiyaç duyarsın:

• Veriye dayalı özel grafikler (bir çizgi grafiği, bir pasta grafiği, bir dalga formu).
• Piksel seviyesinde kontrol gerektiren, hazır widget'larla ifade edilemeyen şekiller.
• Performans kritik çizimler — yüzlerce küçük şekli tek tek widget olarak oluşturmak yerine, hepsini tek bir Canvas'a çizmek çok daha hızlıdır.

#Widget → Element → RenderObject Hatırlatması

Bölüm 1 Konu 1'de öğrendiğimiz üç katmanlı mimariyi (Widget → Element → RenderObject) hatırlarsan — her widget, sonunda bir RenderObject'e dönüşür ve gerçek çizim, RenderObject.paint() metodunda, bir Canvas üzerinde gerçekleşir. CustomPainter, bu düşük seviye çizim katmanına, kendi RenderObject'ini yazmak zorunda kalmadan doğrudan erişmeni sağlayan bir kolaylık katmanıdır (Bölüm 12'de, RenderObject'i tamamen elle yazmayı göreceğiz — CustomPainter, o işin %90'ını basitleştirilmiş bir arayüzle sunar).

#Temel Yapı

class DaireCizici extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final boya = Paint()
      ..color = Colors.indigo
      ..style = PaintingStyle.fill;

    final merkez = Offset(size.width / 2, size.height / 2);
    final yaricap = size.width / 2;

    canvas.drawCircle(merkez, yaricap, boya);
  }

  @override
  bool shouldRepaint(covariant DaireCizici oldDelegate) {
    return false; // statik bir çizim, hiç yeniden çizilmesine gerek yok
  }
}

CustomPaint(
  size: const Size(200, 200),
  painter: DaireCizici(),
)

Parça parça inceleyelim:

extends CustomPainter — Dart Bölüm 7'de öğrendiğimiz extends; CustomPainter, Flutter'ın soyut bir sınıfıdır (Bölüm 7'de öğrendiğimiz gibi, paint/shouldRepaint zorunlu override edilecek metodlardır).

paint(Canvas canvas, Size size) — bu metod, her çizim gerektiğinde çağrılır. canvas, üzerine çizim yapacağın tuvaldir; size, CustomPaint widget'ının sana ayırdığı alanın boyutudur (Bölüm 2 Konu 8'de öğrendiğimiz constraint sistemini hatırla — CustomPaint, kendisine verilen constraint'lere göre bir boyut alır, paint() bu boyutu size parametresiyle sana bildirir).

Paint nesnesi — Dart Bölüm 6'da öğrendiğimiz class + cascade operatörü (..) kombinasyonu; Paint, nasıl çizeceğini (renk, dolgu mu çizgi mi, çizgi kalınlığı) tanımlar — kalemi/fırçayı seçmek gibi düşün.

canvas.drawCircle(merkez, yaricap, boya) — asıl çizim komutu. Canvas sınıfı, drawCircle, drawRect, drawLine, drawPath, drawArc gibi düzinelerce çizim metodu sunar.

shouldRepaint(covariant DaireCizici oldDelegate) — Bölüm 6 Konu 23'te InheritedWidget'ın updateShouldNotify'ını öğrenmiştik; bu, kavramsal olarak birebir aynı fikir. false döndürürsen, Flutter bu çizimi bir kere yapar ve bir daha (veri değişmediği sürece) tekrar çizmez — performans için kritik. covariant anahtar kelimesi, Dart Bölüm 7'de değinmediğimiz ama burada karşına çıkan bir detay: üst sınıftaki (CustomPainter) parametre tipi CustomPainter'dır, ama biz burada daha spesifik bir tip (DaireCizici) kullanmak istiyoruz — covariant, Dart'a "bu daraltmayı bilerek yapıyorum, tip güvenliğini burada gevşet" demenin yoludur.

#Dinamik Bir Örnek — Dairesel İlerleme Çubuğu

class IlerlemeCizici extends CustomPainter {
  final double ilerleme; // 0.0 - 1.0 arası (Konu 36'daki Animation.value gibi düşünebilirsin)

  IlerlemeCizici({required this.ilerleme});

  @override
  void paint(Canvas canvas, Size size) {
    final merkez = Offset(size.width / 2, size.height / 2);
    final yaricap = size.width / 2;

    // Arka plan halkası (gri, tam daire)
    final arkaPlanBoyasi = Paint()
      ..color = Colors.grey[300]!
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12;
    canvas.drawCircle(merkez, yaricap, arkaPlanBoyasi);

    // İlerleme yayı (mavi, sadece 'ilerleme' kadar)
    final ilerlemeBoyasi = Paint()
      ..color = Colors.indigo
      ..style = PaintingStyle.stroke
      ..strokeWidth = 12
      ..strokeCap = StrokeCap.round;

    final rect = Rect.fromCircle(center: merkez, radius: yaricap);
    const baslangicAcisi = -3.14159 / 2; // saat 12 yönünden başla
    final taramaAcisi = 2 * 3.14159 * ilerleme; // Dart Bölüm 3 — matematik operatörleri

    canvas.drawArc(rect, baslangicAcisi, taramaAcisi, false, ilerlemeBoyasi);
  }

  @override
  bool shouldRepaint(covariant IlerlemeCizici oldDelegate) {
    return oldDelegate.ilerleme != ilerleme; // sadece değer değiştiğinde yeniden çiz
  }
}

Dikkat et: ilerleme, Dart Bölüm 6'da öğrendiğimiz constructor parametresi olarak veriliyor — bu, CustomPainter'ı her ilerleme değeri için yeniden oluşturarak kullanacağın anlamına gelir (tıpkı bir widget'ı yeniden build() etmek gibi). shouldRepaint, eski ve yeni ilerleme'yi karşılaştırarak, gereksiz yeniden çizimleri önlüyor.

#AnimatedBuilder ile Birleştirme — Animasyonlu Bir Çizim

Konu 36'da öğrendiğimiz AnimatedBuilder'ı, CustomPainter ile birleştirmek çok yaygın bir kalıptır:

class DaireselIlerlemeCubugu extends StatefulWidget {
  const DaireselIlerlemeCubugu({super.key});

  @override
  State<DaireselIlerlemeCubugu> createState() => _DaireselIlerlemeCubuguState();
}

class _DaireselIlerlemeCubuguState extends State<DaireselIlerlemeCubugu>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return CustomPaint(
          size: const Size(150, 150),
          painter: IlerlemeCizici(ilerleme: _controller.value),
        );
      },
    );
  }
}

Burada, _controller.value (Konu 36'da öğrendiğimiz 0.0–1.0 arası ilerleme), her karede IlerlemeCizici'ye yeni bir ilerleme değeri olarak geçiliyor — bu da shouldRepaint'in true dönmesine ve ekranın her karede yeniden çizilmesine yol açıyor. Bu, tam olarak CustomPainter + AnimationController'ın birlikte çalışma deseni.

#CustomPaint'in child Parametresi

CustomPaint(
  size: const Size(200, 200),
  painter: DaireCizici(),
  child: const Center(child: Text('50%')), // çizimin ÜZERİNE bir widget koy
)

CustomPaint, sadece çizim yapmakla kalmaz — child: parametresiyle, çizimin üzerine normal widget'lar (metin, ikon) da koyabilirsin. Bu, örneğin bir dairesel ilerleme çubuğunun ortasına yüzde metni yazmak için çok kullanışlıdır.

#Metin Çizmek — TextPainter

Canvas'a doğrudan Text widget'ı koyamazsın (widget değil, düşük seviye bir çizim yüzeyi) — metin çizmek için TextPainter kullanılır:

void _metinCiz(Canvas canvas, Size size) {
  final textPainter = TextPainter(
    text: const TextSpan(
      text: 'Merhaba',
      style: TextStyle(color: Colors.black, fontSize: 16),
    ),
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(); // önce boyutunu hesapla
  textPainter.paint(canvas, Offset(size.width / 2 - textPainter.width / 2, 10));
}

layout() çağrısı, Bölüm 2 Konu 8'de öğrendiğimiz "constraints go down, sizes go up" ilkesinin düşük seviyede bir yansımasıdır — metnin ne kadar yer kaplayacağını önce hesaplaman (layout()), sonra çizmen (paint()) gerekir.

#🎯 Bu Dersten Çıkarılması Gerekenler

• CustomPainter, RenderObject'in paint() katmanına doğrudan erişim sağlar — hazır widget'larla ifade edilemeyen özel çizimler için kullanılır.
• paint(Canvas canvas, Size size), asıl çizimin yapıldığı metoddur; Paint nesnesi rengi/stili, Canvas metodları (drawCircle, drawArc, drawPath vb.) şekli belirler.
• shouldRepaint, InheritedWidget'ın updateShouldNotify'ına benzer — gereksiz yeniden çizimleri önler.
• CustomPainter + AnimationController + AnimatedBuilder, animasyonlu özel çizimlerin standart birleşimidir.
• CustomPaint'in child: parametresi, çizimin üzerine normal widget koymanı sağlar.
• Metin çizmek için Text widget'ı değil, TextPainter (layout() + paint()) kullanılır.

#📝 Ödevler

• [ ] CustomPainter ile basit bir üçgen çiz (Path + drawPath kullanarak — moveTo/lineTo/close metodlarını araştır).
• [ ] Dairesel ilerleme çubuğu örneğini, AnimationController ile 0'dan 1'e animasyonlu şekilde dolduracak hale getir.
• [ ] CustomPaint'in child: parametresiyle, ilerleme çubuğunun ortasına o anki yüzdeyi gösteren bir Text koy.
• [ ] TextPainter kullanarak, bir Canvas üzerine ortalanmış bir başlık metni çiz.
• [ ] Kendi cümlelerinle, "shouldRepaint'i her zaman true döndürseydik ne olurdu" sorusunu, performans açısından açıkla.

Sıradaki konu: Bölüm 8 — Konu 39: Rive / Lottie Entegrasyonu (Bölüm 8'in Son Konusu)