Özet - CustomPainter
- Flutter kursu
- İleri seviye
- Ders 55/69
- 4 dk
CustomPaint ve Path'i birleştirerek pasta grafik yaparsın.
Pasta grafik için CustomPaint ve Path
Bir pasta grafik yapmak için her dilimi canvas.drawArc ile veya Path'in addArc metoduyla çizersin. Her dilim için farklı renk Paint kullanırsın ve dilimlerin açılarını toplayarak bütün bir daire elde edersin.
final path = Path();
path.moveTo(50, 50);
path.addArc(rect, startAngle, sweepAngle);
path.close();
canvas.drawPath(path, paint);Uygulama Yarım daire dilimi çiz
PiePainter sınıfında paint metodu yaz. 100x100 Rect içinde, siyah dolu fırça ile drawArc kullanarak 0 radyandan başlayıp math.pi radyan süpüren bir yay çiz (useCenter: true). main içinde painter örneğini alıp tipini yazdır.
Başlangıç kodu
import 'dart:math' as math;
import 'package:flutter/material.dart';
// PiePainter sınıfını tanımla
void main() {
// PiePainter örneğini al ve tipini yazdır
}Örnek çözüm
import 'dart:math' as math;
import 'package:flutter/material.dart';
class PiePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.fill;
final rect = Rect.fromLTWH(0, 0, 100, 100);
canvas.drawArc(rect, 0, math.pi, true, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
void main() {
final painter = PiePainter();
print(painter.runtimeType);
}Beklenen çıktı
PiePainter
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Pasta diliminin yayının belirtmek için Path'e hangisi eklenir?
- path.close
- path.moveTo
- path.addArc Doğru cevap
- path.lineTo
Açıklama: addArc, Path'e bir yay ekler ve pasta diliminin eğri kenarını oluşturur; lineTo düz çizgi, moveTo yalnızca kalem taşır, close şekli kapatır.
2 addArc'a sweepAngle ver
path.addArc(rect, startAngle, ____);path.addArc(rect, startAngle, sweepAngle);Açıklama: addArc'ın üçüncü parametresi sweepAngle'dır; yayın ne kadarlık açıyı kaplayacağını belirler.
3 Pasta grafik parçaları
| Kavram | Anlamı |
|---|---|
CustomPaint |
Pasta grafiği widget'ı |
Path |
Dilim şekli |
addArc |
Yay ekler |
Paint |
Dilim rengi |