Flutter 애플리케이션을 개발하다 보면 다양한 모양을 다루는 일이 있습니다. 하지만 기본적으로 제공되는 일부 모양들은 우리의 요구에 맞지 않을 수 있습니다. 그 중 하나가 superellipse 모양입니다. 이 모양의 크기와 비율을 조정하는 방법에 대해 알아보겠습니다.

1. Flutter Superellipse 모양의 기본 사용

먼저 superellipse 모양을 사용해 보겠습니다. 아래 코드를 참고해주세요.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.blue,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.elliptical(30, 90)),
            ),
          ),
        ),
      ),
    );
  }
}

이 코드를 실행하면 가로 100, 세로 100의 네모 상자가 아래쪽이 조금 둥글게 변형된 형태로 나타날 것입니다. 주어진 값에 따라 superellipse 형태가 나타납니다.

2. Superellipse 모양의 크기와 비율 조정

만약 위 코드에서 Radius.elliptical(30, 90) 부분의 값을 조정하여 superellipse 모양의 크기와 비율을 조정하고 싶다면 다음과 같이 하면 됩니다.

• 첫 번째 매개변수는 가로 길이 조정
• 두 번째 매개변수는 세로 길이 조정
• 가로, 세로 길이가 같으면 완벽한 원 형태가 됩니다.
• 값이 크면 더 둥글어지고, 작으면 더 각진 형태가 됩니다.

따라서 Radius.elliptical(30, 90) 부분을 Radius.elliptical(60, 60) 혹은 Radius.elliptical(20, 70) 등으로 변경하여 테스트해보세요. 이를 통해 superellipse 모양의 크기와 비율을 조정할 수 있습니다.

이와 같이 Flutter에서 superellipse 모양의 크기와 비율을 조정하는 방법에 대해 알아보았습니다. 다양한 모양을 다룰 때 유용하게 활용할 수 있는 기술이니, 참고하시기 바랍니다.

참고문헌:

• https://api.flutter.dev/flutter/painting/BorderRadius-class.html