[flutter] 플러터에서 superellipse 모양을 사용하는 방법

15 Dec 2023

flutter

플러터(Flutter)에서는 다양한 모양을 만들 수 있습니다. superellipse 모양은 기본적으로 제공되지는 않지만, 커스텀 페인팅을 통해 이를 구현할 수 있습니다.

이번 포스트에서는 플러터를 사용하여 superellipse 모양을 만드는 방법에 대해 알아보겠습니다.

1. CustomPainter 클래스 생성

먼저 CustomPainter 클래스를 생성하고, 이 안에서 superellipse 모양을 그릴 수 있는 로직을 구현합니다.

예를 들어, 아래와 같이 CustomPainter 클래스를 생성할 수 있습니다.

import 'package:flutter/material.dart';

class SuperellipsePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // superellipse 모양을 그리는 로직 구현
  }

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

2. CustomPaint 위젯 사용

다음으로, CustomPainter 클래스를 이용하여 CustomPaint 위젯을 생성합니다. 여기서 CustomPainter로 구현한 superellipse 모양이 실제로 화면에 그려집니다.

CustomPaint(
  painter: SuperellipsePainter(),
  child: Container(
    // 다른 위젯들을 포함할 수 있는 부모 Container 위젯
  ),
)

3. superellipse 모양 로직 구현

CustomPainter의 paint 메소드 안에서 superellipse 모양을 그리는 로직을 구현합니다. 이 과정에서 Path 클래스를 사용하여 원하는 모양을 만들 수 있습니다.

예를 들어, 아래와 같이 superellipse 모양을 만들 수 있습니다.

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill;

  final path = Path()
    ..moveTo(0, size.height)
    ..lineTo(0, size.height * 0.6)
    ..cubicTo(0, size.height * 0.4, size.width * 0.3, 0, size.width * 0.5, 0)
    ..cubicTo(size.width * 0.7, 0, size.width, size.height * 0.4, size.width, size.height * 0.6)
    ..lineTo(size.width, size.height)
    ..close();

  canvas.drawPath(path, paint);
}

결론

위의 단계를 따라 플러터 앱에서 superellipse 모양을 만들 수 있습니다. 이를 응용하여 원하는 모양을 구현해보세요.

참고: Custom painting in Flutter