CustomPaint vs Canvas: Flutter'da Grafik Performansı

Flutter'da şekil, grafik ya da özel tasarım çizmek istediğinde CustomPaint ve Canvas kavramları karşına çıkar. İkisi arasındaki farkı bilmek, uygulamanın hızını doğrudan etkiler.

CustomPaint, Flutter'ın grafik çizim için sunduğu widget'tır. İçinde bir Canvas nesnesi kullanarak çizim yaparsın. Canvas ise aslında çizim talimatlarını verdiğin araçtır, fırça gibi düşün. CustomPaint, Canvas'ı sarmalayan bir katman; yönetimi, yenileme (repaint) zamanlaması ve performans optimizasyonunu Flutter'a bırakır.

Performans açısından fark nerede ortaya çıkar? CustomPaint, değişen duruma (state) göre widget ağacını yeniden çizer. Eğer her karede yüzlerce çizim yapıyorsan, bu pahalı olabilir. Saf Canvas kullanmak daha hızlı görünse de, Flutter'da doğrudan Canvas erişimi yoktur; her zaman CustomPaint içinde çalışırsın.

En önemli ipucu: CustomPaint'in `shouldRebuild` parametresini doğru ayarla. Eğer çizim değişmemişse, Flutter'a yeniden çizme gerekmediğini söyle. Bu çoğu zaman performans sorununu çözer.

Pratik örnek olarak, basit bir daire çizelim:

1import 'package:flutter/material.dart';
2
3void main() {
4runApp(MyApp());
5}
6
7class MyApp extends StatelessWidget {
8@override
9Widget build(BuildContext context) {
10return MaterialApp(
11home: Scaffold(
12appBar: AppBar(title: Text('CustomPaint Örneği')),
13body: Center(
14child: CustomPaint(
15painter: CirclePainter(),
16size: Size(200, 200),
17),
18),
19),
20);
21}
22}
23
24class CirclePainter extends CustomPainter {
25@override
26void paint(Canvas canvas, Size size) {
27final paint = Paint()..color = Colors.blue..strokeWidth = 3..style = PaintingStyle.stroke;
28
29canvas.drawCircle(
30Offset(size.width / 2, size.height / 2),
31100,
32paint,
33);
34}
35
36@override
37bool shouldRebuild(CirclePainter oldDelegate) {
38return false; // Daire değişmediği için yeniden çizme yok
39}
40}

Çıktı: Ekranın ortasında mavi renkli, 100 piksel yarıçaplı bir daire.

`shouldRebuild` metodu burada `false` döndürüyor; bu demek oluyor ki bir kez çizildikten sonra Flutter bunu tekrar çizmeyecek. Eğer animasyon veya dinamik değişim varsa, `true` döndür. Ama gereksiz yere `true` bırakırsan, her frame'de yeniden çizim yapılır ve telefon ısınır.

Özetle: CustomPaint kullan, ama `shouldRebuild`'i kontrol et. Statik grafikler için `false`, dinamik içerik için `true`, bu basit kural çoğu performans sorununu çözer.