[flutter] CustomPainter

혼자 해보는 프로젝트에 CustomPaint를 사용해야될것 같아 공부해보았다

class DemoPainter extends CustomPainter {


  @override
  void paint(Canvas canvas, Size size) {
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

CustomPaint는 CustomPainter를 상속해서 canvas위에 그림을 그릴수 있는 위젯이다

paint 와 shouldRepaint함수를 오버라이드 하며 paint는 그림을 그리는것, shouldRepaint는 애니메이션을 사용할때 이전 값과의 차이를 비교해 다시 그려주는 함수이다. 리턴값이 false시에는 그리지 않는다.

CustomPaint(
          painter: DemoPainter(),
          child: SizedBox.square(
            dimension: 200.0,
          ),
          // size: Size(10,10),
          // foregroundPainter: DemoPainter(),
        )

큰 옵션으론 4가지가 있다.
painter는 커스텀 페인터를 상속받은 객체를 넣으면 되고, child보다 먼저그리게되어 child가 있을경우 가려질수도 있다. 그걸 방지하기 위해 foregroundPainter를 사용하여 child 다음에 그림을 그릴수있다.
size는 child 위젯 혹은 상위 위젯의 크기에 맞춰지게 되고 child가 없다면 size속성은 null이 아니어야 한다.

class _BasicExampleState extends State<BasicExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomPaint(
      painter: DemoPainter(),
      child: SizedBox.square(
        dimension: 200.0,
      ),
    ));
  }
}

class DemoPainter extends CustomPainter {
  var rect = Rect.fromCenter(
    center: const Offset(100.0, 100.0),
    width: 50,
    height: 50,
  );

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(rect, Paint());
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

실제로 그림을 그릴땐 paint에 draw__ 함수를 사용하면된다.

class DemoPainter extends CustomPainter {
  Paint rectPaint = Paint()..color = Colors.blue;
  var rect = Rect.fromCenter(
    center: const Offset(100.0, 100.0),
    width: 50,
    height: 50,
  );

  Paint linePaint = Paint()
    ..color = Colors.red
    ..strokeWidth = 5;

  Offset lineOffest1 = Offset(10, 10);
  Offset lineOffest2 = Offset(200, 200);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(rect, rectPaint);
    canvas.drawLine(lineOffest1, lineOffest2, linePaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

paint 객체를 생성해 다양하게 옵션을 정할수도있다.

 	canvas.drawRect(); //사각형 그리기
    canvas.drawLine();  // 선
    canvas.drawCircle();  // 원
    canvas.drawArc();  // 원호(곡선)
    canvas.drawPath(); // 경로에 따라 그리기
    canvas.drawImage(); // 이미지
    canvas.drawImageNine(); //나인패쓰 이미지
    canvas.drawParagraph(); //텍스트 문단

그외에도 다양한 도형들이 가능하기때문에 이미지파일이 없거나.. 역동적인 애니메이션 혹은 복잡한 위젯을 그릴때 사용하면 괜찮을것같다.