Özet - CustomPainter

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.

Örnek çözümü göster

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);
}

Kendini test et

Pasta diliminin yayının belirtmek için Path'e hangisi eklenir?
- path.close
- path.moveTo
- path.addArc
- path.lineTo
Cevabı göster

path.addArc — 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.

addArc'a sweepAngle ver

path.addArc(rect, startAngle, ____);

Cevabı göster

path.addArc(rect, startAngle, sweepAngle);

Pasta grafik parçaları

CustomPaint

Pasta grafiği widget'ı
Path

Dilim şekli
addArc

Yay ekler
Paint

Dilim rengi

Sıradaki ders: AnimationController

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler