Flutter 의 CustomPaint 클래스

Flutter에는 그림의 특성등을 지정하는 Paint,  그림을 그리는 동작이 기록되는 Canvas,  앞의 두 class 를 담아내는 CustomPainter 와 상위 위젯 CustomPaint 가 있다. paint, canvas, foregroundPainter, customPainter 순으로 stack 처럼 쌓아올리며 그려지며 나중에 그려지는 위젯이 제일 위에 위치한다

 

페인팅하라는 요청을 받으면 CustomPaint는 먼저 페인터에게 현재 캔버스에 페인팅하도록 요청한 다음 자식을 칠하고 자식을 그린 후 foregroundPainter 에 페인팅을 요청한다. 캔버스의 좌표계는 CustomPaint 객체 의 좌표계와 일치한다 .

 

CustomPainter 를 상속받는 class에 하기와 같이 구현하면 paint 와 shouldRepaint 를 구현 할 수 있다.

  @override
  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(
      color: Colors.black,
      fontSize: 15,
    );
    double xPosition = 30.0; /
    double yPosition = 10.0;

    for (String header in headers) {
      drawText(canvas, header, textStyle, xPosition, yPosition);
      xPosition += space; 
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;

  void drawText(Canvas canvas, String text, TextStyle style, double x, double y) {
    final textSpan = TextSpan(text: text, style: style);
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );

    textPainter.layout();
    final xCenter = x - (textPainter.width / 2);
    final yCenter = y + (titleHeight / 2) - (textPainter.height / 2);
    textPainter.paint(canvas, Offset(xCenter, yCenter));
  }