Flutter CustomPaint 위젯으로 커스텀 그래픽 그리기

728x90

들어가기 전에

Flutter에서 CustomPaint 위젯은 앱 내에서 커스텀 그래픽을 직접 그릴 수 있도록 도와주는 강력한 도구입니다. 이 위젯은 복잡한 도형, 애니메이션, 차트, 그래픽 효과 등을 구현할 때 사용되며, Flutter의 기본 위젯만으로는 표현할 수 없는 UI를 자유롭게 그릴 수 있게 해줍니다. 이번 포스트에서는 CustomPaint 위젯의 기본 개념과 사용법을 살펴보고, 이를 통해 간단한 커스텀 그래픽을 그려보는 방법을 소개해보겠습니다.

CustomPaint 위젯이란?

CustomPaint 위젯은 Flutter에서 그래픽 요소를 직접 그릴 수 있는 위젯입니다. 화면에 도형, 선, 텍스트 등 다양한 그래픽을 그리기 위해 사용됩니다. CustomPaint는 painter라는 속성을 통해 CustomPainter 클래스를 구현하여 사용자 정의된 그리기 로직을 수행합니다.

CustomPaint는 다음과 같은 경우에 유용합니다:

도형을 직접 그려야 하는 경우
차트나 그래프를 커스터마이징할 때
복잡한 애니메이션 또는 그래픽 효과를 구현할 때

이 위젯을 사용하면 Flutter의 내장된 위젯으로는 구현하기 어려운 세밀한 UI 구성을 할 수 있습니다.

CustomPaint의 기본 구조

CustomPaint를 사용하기 위해서는 CustomPainter 클래스를 구현해야 합니다. CustomPainter 클래스에는 두 가지 중요한 메서드가 있습니다:

paint(Canvas canvas, Size size):
- Canvas 객체를 사용하여 실제로 그림을 그리는 메서드입니다. 이 메서드에서 선, 사각형, 원 등을 그릴 수 있습니다.
shouldRepaint(covariant CustomPainter oldDelegate):
- 이전 상태와 비교하여 다시 그릴지 여부를 결정하는 메서드입니다. 상태가 변경되지 않았으면 false를 반환해 성능을 최적화할 수 있습니다.

CustomPaint 사용 예제

간단한 예제를 통해 CustomPaint 위젯을 어떻게 사용하는지 살펴보겠습니다. 아래 코드는 화면에 원을 그리는 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CustomPaint 예제'),
        ),
        body: Center(
          child: CustomPaint(
            size: Size(200, 200),
            painter: CirclePainter(),
          ),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 2,
      paint,
    );
  }

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

설명:

CustomPaint 위젯: CustomPaint 위젯은 크기를 200x200으로 지정하여 화면에 원을 그립니다. painter 속성에 CirclePainter라는 커스텀 페인터 클래스를 넘겨줍니다.
CirclePainter 클래스: CustomPainter 클래스를 상속받아 paint 메서드를 구현합니다. 여기서 Canvas 객체를 통해 원을 그립니다.
Canvas와 Paint: Canvas는 Flutter의 화면에 직접 그리기 위한 도구이고, Paint는 색상, 선 굵기, 스타일 등 그리기 속성을 지정하는 객체입니다.

CustomPaint를 사용한 복잡한 그래픽 그리기

위 예제처럼 간단한 원을 그릴 수 있을 뿐만 아니라, CustomPaint를 활용하면 더 복잡한 그래픽도 쉽게 구현할 수 있습니다. 예를 들어, 다각형, 선, 곡선, 그리고 다양한 애니메이션 효과 등을 직접 구현할 수 있습니다.

예제: 다각형 그리기

class PolygonPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke;

    final path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

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

이 코드를 사용하면 삼각형 모양의 도형을 그릴 수 있습니다. Path 객체는 점을 연결하여 도형을 만들고, Canvas는 그 경로를 그리는 역할을 합니다.

CustomPaint 위젯의 성능 최적화

CustomPaint는 강력한 위젯이지만, 사용 시 주의해야 할 성능상의 이슈가 있습니다. 특히 복잡한 그래픽을 계속해서 다시 그리는 경우, 성능 저하가 발생할 수 있습니다. 이러한 성능 문제를 최소화하기 위해 몇 가지 팁을 소개합니다:

shouldRepaint 메서드 최적화: 이 메서드를 적절히 구현하여 불필요한 재그리기를 방지해야 합니다. 상태가 변경되지 않았다면 false를 반환하여 다시 그리지 않도록 합니다.
RepaintBoundary 사용: RepaintBoundary 위젯을 사용하면 그려진 내용이 캐시되어 다시 그릴 필요가 없는 경우 성능을 향상시킬 수 있습니다.
Clip과의 적절한 사용: 그래픽 요소가 클립될 때 성능이 저하될 수 있습니다. 필요하지 않다면 클립을 피하는 것이 좋습니다.

결론

Flutter에서 CustomPaint 위젯은 앱에 커스텀 그래픽을 구현할 수 있는 강력한 도구입니다. 기본 위젯만으로는 표현하기 어려운 독창적인 UI나 복잡한 도형을 그리기에 적합하며, Canvas와 Paint 객체를 사용해 매우 세밀한 그래픽 작업을 할 수 있습니다. 이 가이드를 통해 CustomPaint의 기본 개념을 이해하고, 다양한 그래픽 요소를 자유롭게 표현하는데 도움이 되었으면 좋겠습니다. 감사합니다.