[flutter] superellipse 모양을 활용한 플러터 앱의 프로필 이미지 디자인하기

15 Dec 2023

flutter

플러터는 다양한 모양의 위젯과 효과를 제공하여 사용자 정의 디자인을 구현하는 데 매우 효과적입니다. 이 포스트에서는 Superellipse 모양을 활용하여 프로필 이미지를 디자인하는 방법에 대해 알아보겠습니다.

Superellipse 모양이란?

Superellipse는 마크 로게의 수학적인 곡선으로, 사용자 정의 모양의 프로필 이미지를 만드는 데 적합합니다. 이 모양은 원보다 더 다각형적이며, 부드러운 곡선으로 구성되어 있습니다.

Flutter 앱에 Superellipse 모양 적용하기

프로필 이미지에 Superellipse 모양을 적용하려면 ClipPath 위젯을 사용하여 사용자 정의 모양을 만들고, 해당 모양으로 프로필 이미지를 자르면 됩니다.

아래는 Superellipse 모양의 프로필 이미지를 구현하는 간단한 예시 코드입니다.

import 'package:flutter/material.dart';

class SuperEllipseProfileImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150,
      height: 150,
      child: ClipPath(
        clipper: SuperEllipseClipper(),
        child: Image.network('https://example.com/profile-image.jpg'),
      ),
    );
  }
}

class SuperEllipseClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    const radius = 10.0; // 원하는 superellipse 모양의 정도
    path.moveTo(size.width / 2, 0);
    path.lineTo(size.width - radius, 0);
    path.quadraticBezierTo(size.width, 0, size.width, radius);
    path.lineTo(size.width, size.height - radius);
    path.quadraticBezierTo(size.width, size.height, size.width - radius, size.height);
    path.lineTo(radius, size.height);
    // 다른 점들의 좌표도 계산하여 path를 완성합니다.
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: SuperEllipseProfileImage(),
      ),
    ),
  ));
}

이 코드를 통해 Superellipse 모양을 가진 프로필 이미지를 구현할 수 있습니다.

마무리

이와 같은 방식으로 Flutter를 사용하여 Superellipse와 같은 사용자 정의 모양의 프로필 이미지를 구현할 수 있습니다. 사용자 정의 모양에 대한 이해를 바탕으로 디자인을 더욱 창의적으로 구성할 수 있을 것입니다.