[flutter] 플러터 앱에서 superellipse 모양으로 구성된 UI 요소 만들기

15 Dec 2023

flutter

플러터(Flutter) 앱에서 superellipse 모양의 UI 요소를 만드는 방법을 살펴보겠습니다. superellipse는 사각형을 둥근 모서리에서 시작해 더 복잡한 곡선 형태로 변환하는 수학적 공식입니다. 이를 활용하여 다양한 UI 디자인을 만들 수 있습니다.

1. CustomPainter를 이용한 superellipse 그리기

먼저, CustomPainter를 사용하여 superellipse를 그리는 방법을 살펴보겠습니다. 아래는 CustomPainter 클래스를 확장하여 superellipse를 그리는 예제 코드입니다.

import 'package:flutter/material.dart';
import 'dart:math';

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

    Path path = Path();

    double a = size.width / 2;
    double b = size.height / 2;
    double n = 2; // n can be adjusted for different shapes

    for (var t = 0.0; t < 2 * pi; t += 0.01) {
      double x = a * pow(cos(t).abs(), 2 / n) * (cos(t) >= 0 ? 1 : -1);
      double y = b * pow(sin(t).abs(), 2 / n) * (sin(t) >= 0 ? 1 : -1);
      if (t == 0) {
        path.moveTo(x + size.width / 2, y + size.height / 2);
      } else {
        path.lineTo(x + size.width / 2, y + size.height / 2);
      }
    }
    path.close();
    canvas.drawPath(path, paint);
  }

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

2. CustomPainter를 사용하여 superellipse 모양의 커스텀 위젯 생성

이제 위에서 작성한 SuperellipsePainter 클래스를 사용하여 Container 위젯을 확장한 SuperellipseWidget 커스텀 위젯을 만들어보겠습니다.

class SuperellipseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      child: CustomPaint(
        painter: SuperellipsePainter(),
      ),
    );
  }
}

위 코드에서는 Container 내부에 CustomPaint 위젯을 사용하여 SuperellipsePainter를 그립니다.

결론

플러터를 사용하여 superellipse 모양의 UI 요소를 만드는 방법을 살펴보았습니다. 이를 통해 다양하고 창의적인 UI 디자인을 구현할 수 있습니다. 위의 코드를 참고하여 원하는 모양의 superellipse를 만들어보세요.

참고 자료:

플러터(Flutter)에서 superellipse 모양의 UI 요소를 만드는 방법에 대한 내용을 마치겠습니다.