[flutter] superellipse 모양을 이용한 플러터 앱의 헤더 디자인하기

15 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 사용자 경험(UX)을 향상시키기 위해 다양한 디자인 기술을 사용할 수 있습니다. 이번에는 superellipse 모양을 이용하여 플러터 앱의 헤더를 디자인하는 방법에 대해 알아보겠습니다.

superellipse란 무엇인가요?

superellipse은 수학적으로 둥근 사각형 모양을 나타내는 수식을 의미합니다. 이 모양은 기존의 원형이나 사각형과는 조금 더 다양한 형태를 표현할 수 있어 디자인에 활용됩니다.

플러터에서 superellipse 모양의 헤더 디자인하기

import 'package:flutter/material.dart';

class SuperellipseHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: SuperellipseClipper(),
      child: Container(
        height: 200,
        color: Colors.blue,
        child: Center(
          child: Text(
            'Superellipse Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

class SuperellipseClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final radius = 20.0;
    path.moveTo(0, size.height - radius);

    path.quadraticBezierTo(0, size.height, radius, size.height);
    path.lineTo(size.width - radius, size.height);
    path.quadraticBezierTo(size.width, size.height, size.width, size.height - radius);
    path.lineTo(size.width, radius);
    path.quadraticBezierTo(size.width, 0, size.width - radius, 0);
    path.lineTo(radius, 0);
    path.quadraticBezierTo(0, 0, 0, radius);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

위 코드는 superellipse 모양의 헤더를 만들기 위한 플러터 위젯을 구현한 예시입니다. SuperellipseHeader 위젯은 clipper 속성을 이용하여 SuperellipseClipper 클래스로 정의된 특별한 모양을 가진 헤더를 생성합니다.

이제 이런 방식으로 superellipse 모양을 이용하여 플러터 앱의 헤더를 디자인할 수 있습니다. superellipse 모양은 기존의 간단한 형태와는 다른 독특한 디자인을 구현해내어 사용자들에게 더 흥미로운 경험을 선사할 수 있습니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.

이상으로 superellipse 모양을 이용한 플러터 앱의 헤더 디자인에 대해 알아보았습니다. 부디 여러분의 앱에도 적용해보시길 바랍니다.