[flutter] superellipse 모양을 이용한 플러터 앱의 스플래시 화면 디자인하기

15 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 시각적인 디자인은 매우 중요합니다. 특히, 스플래시 화면은 앱의 처음인 만큼 사용자에게 강력한 첫인상을 전달해야 합니다. 이번에는 superellipse(슈퍼엘립스) 모양을 활용하여 플러터 앱의 스플래시 화면을 디자인하는 방법에 대해 알아보겠습니다.

슈퍼엘립스란?

슈퍼엘립스는 일반적인 타원이나 사각형보다 조금 더 독특한 모양을 가지고 있습니다. 이 모양은 스플래시 화면이나 로고 등의 디자인에 사용되어 유니크하면서 부드러운 느낌을 전달합니다.

플러터 앱에 슈퍼엘립스 모양 적용하기

플러터에서는 다양한 모양을 만들기 위해 CustomPainter를 사용할 수 있습니다. 아래는 superellipse 모양의 CustomPainter 예제 코드입니다.

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

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

    canvas.drawPath(
      _createSuperellipsePath(size, 20.0),
      paint,
    );
  }

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

  Path _createSuperellipsePath(Size size, double radius) {
    Path path = Path();
    path.moveTo(size.width / 2, 0);
    for (int i = 1; i < 9; i++) {
      double angle = (math.pi / 4) * i;
      double x = size.width / 2 + radius * math.cos(angle);
      double y = size.height / 2 + radius * math.sin(angle);
      path.lineTo(x, y);
    }
    path.close();
    return path;
  }
}

위 코드에서 SuperellipsePainter 클래스는 CustomPainter를 상속받아 슈퍼엘립스 모양의 도형을 그리는 역할을 합니다. paint 메서드에서는 페인트 속성 및 슈퍼엘립스 모양의 Path를 생성하고 그리는 작업을 수행합니다.

앱의 스플래시 화면에 슈퍼엘립스 적용하기

실제 앱의 스플래시 화면에 위에서 만든 SuperellipsePainter를 적용하려면, 다음과 같이 CustomPaint 위젯을 사용하면 됩니다.

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: Size(200, 200),
          painter: SuperellipsePainter(),
        ),
      ),
    );
  }
}

위의 코드에서 CustomPaint 위젯을 사용하여 SuperellipsePainter를 적용한 것을 확인할 수 있습니다. 이제 더욱 유니크한 스플래시 화면을 가지게 되었습니다.

슈퍼엘립스 모양은 플러터 앱의 스플래시 화면에 동적이고 아름다운 모양을 부여하는데 유용합니다. 이를 활용하여 사용자들에게 더욱 매력적인 첫인상을 남길 수 있을 것입니다.

위의 예제 코드와 설명을 참고하여, 나만의 슈퍼엘립스 스플래시 화면을 디자인해보세요!