[flutter] 플러터 앱에서 superellipse 모양으로 테두리 그리기 방법

15 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 빌더로서, 모바일 앱 및 웹 앱을 만들기 위한 솔루션입니다. 이 기술을 사용하면 풍부한 사용자 경험을 제공하는 동시에 효율적으로 앱을 개발할 수 있습니다.

이번에는 플러터 앱에서 superellipse 모양으로 테두리를 그리는 방법에 대해 알아보겠습니다.

1. CustomPainter 클래스 활용

플러터 앱에서 원하는 테두리 모양을 그리려면 CustomPainter 클래스를 사용해야 합니다. CustomPainter 클래스를 상속받아 원하는 도형이나 모양을 그릴 수 있습니다.

import 'package:flutter/material.dart';

class SuperellipseBorderPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Superellipse 모양의 경로 생성
    var path = Path()
      ..moveTo(size.width / 2, 0)
      ..lineTo(size.width, size.height / 2)
      ..lineTo(size.width / 2, size.height)
      ..lineTo(0, size.height / 2)
      ..close();

    // 경로를 기반으로 선 그리기
    canvas.drawPath(path, Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0);
  }

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

CustomPainter 클래스를 상속받은 SuperellipseBorderPainter 클래스에서는 paint 메서드를 오버라이드하여 원하는 모양의 테두리를 그리는데 사용됩니다.

2. CustomPaint 위젯으로 적용

CustomPainter 클래스를 구현한 후에는 CustomPaint 위젯을 사용하여 앱의 UI에 적용할 수 있습니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Superellipse Border'),
    ),
    body: Center(
      child: CustomPaint(
        size: Size(100, 100), // 테두리가 그려질 영역의 크기 설정
        painter: SuperellipseBorderPainter(), // 사용자 정의 페인터 지정
      ),
    ),
  );
}

위 코드에서 CustomPaint 위젯을 사용하여 SuperellipseBorderPainter를 지정하여 테두리를 표현했습니다.

이제 플러터 앱에서 superellipse 모양으로 테두리를 그리는 방법을 알아보았습니다! 위의 코드를 참고하여 자신만의 테두리 모양을 만들어보세요.