CustomPainter 완전 정복 — Flutter에서 나만의 캔버스를 그려보자

Flutter를 처음 배웠을 때, 나는 단순히 "위젯을 조립해 UI를 만드는 프레임워크"라고만 생각했다.
하지만 어느 날, 디자인 시안 속 곡선과 패턴, 그림자들을 보며 깨달았다.
아... 이것만으론 부족하구나.

그때 처음 마주한 개념이 바로 CustomPainter였다.
직접 선을 그리고, 면을 채우고, 캔버스를 내 마음대로 휘젓는 그 경험은
Flutter에서 또 다른 자유를 얻는 느낌이었다.

---

🎨 CustomPainter란?

Flutter는 대부분의 UI 요소를 위젯으로 구성한다. 하지만 더 섬세한 표현이 필요할 땐,
CustomPainter를 사용해 직접 도형이나 경로를 그릴 수 있다.
마치 웹에서 canvas를 다루는 것과 비슷한 느낌이다.

🧱 기본 구조 이해하기

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 여기에 그림 그리기
  }

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

CustomPaint 위젯에 적용해서 사용한다:

CustomPaint(
  painter: MyPainter(),
  child: Container(),
)

✏️ 예제로 알아보기

1. 선 긋기 — 시작은 간단하게

class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4;

    canvas.drawLine(Offset(0, 0), Offset(size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

캔버스는 무한한 공간이지만, 그 시작은 언제나 한 줄의 선에서 출발한다.

2. 원 그리기 — 중심을 향한 여정

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

    final center = Offset(size.width / 2, size.height / 2);
    final radius = min(size.width, size.height) / 4;

    canvas.drawCircle(center, radius, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

딱 중심에 원을 하나. 간단하지만 앱의 분위기를 완전히 바꿀 수도 있다.

3. Path로 삼각형 — 점과 점 사이의 스토리

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

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

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Path는 '선을 이어 붙인다'는 개념에서 시작하지만, 우리가 표현할 수 있는 건 그 이상의 것이다.

4. 그라디언트로 감성 더하기

class GradientPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Offset.zero & size;
    final gradient = LinearGradient(
      colors: [Colors.indigo, Colors.cyan],
    );

    final paint = Paint()..shader = gradient.createShader(rect);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

감성은 디테일에서 나온다. 그라디언트 하나로 분위기는 완전히 바뀔 수 있다.

---

📌 Tip: 이런 데 활용할 수 있어요

• 로딩 인디케이터 애니메이션
• 커스텀 차트 (파이, 도넛 등)
• Canvas 기반 게임 UI
• 감성적인 테마 배경

🧘 마무리하며

Flutter의 CustomPainter는 단순한 기능이 아니다.
그건 표현의 자유이고, 창조의 시작이다.
우리가 그리는 작은 선 하나가 앱 전체의 분위기를 바꿀 수 있다면,
그건 코드 그 이상의 가치 아닐까?

 

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 심화과정입니다.