[flutter] 플러터 앱에서 superellipse 모양을 활용한 검색 창 디자인하기

15 Dec 2023

flutter

모바일 앱의 사용자 경험을 향상시키기 위해 검색 창의 디자인은 매우 중요합니다. 이번 포스트에서는 플러터(Flutter)로 개발된 앱에서 superellipse(슈퍼 엘립스) 모양을 활용하여 독특하고 시각적으로 매력적인 검색 창을 디자인하는 방법을 알아보겠습니다.

1. superellipse 모양

슈퍼 엘립스(superellipse)는 일반적인 원 또는 타원의 형태와는 조금 다른 형태로, 모서리가 부드럽고 뾰족하지 않은 곡선으로 이루어진 다각형입니다. 이 모양은 일반적으로 아이콘, 버튼 및 창 디자인 등 다양한 UI 요소에 사용되며, 독특한 시각적 효과를 제공합니다.

2. Flutter에서의 superellipse 모양 구현

Flutter에서 superellipse 모양을 구현하기 위해서는 CustomPainter 클래스를 사용하여 새로운 모양을 그릴 수 있습니다. 아래는 간단한 예시 코드입니다.

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

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

    double width = size.width;
    double height = size.height;
    double radius = 20;

    Path path = Path()
      ..moveTo(radius, 0)
      ..lineTo(width - radius, 0)
      ..quadraticBezierTo(width, 0, width, radius)
      ..lineTo(width, height - radius)
      ..quadraticBezierTo(width, height, width - radius, height)
      ..lineTo(radius, height)
      ..quadraticBezierTo(0, height, 0, height - radius)
      ..lineTo(0, radius)
      ..quadraticBezierTo(0, 0, radius, 0)
      ..close();

    canvas.drawPath(path, paint);
  }

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

3. 검색 창 디자인 적용

이제 위에서 정의한 SuperellipseShape 클래스를 활용하여 superellipse 모양을 가진 독특한 검색 창을 디자인할 수 있습니다. 아래는 검색 창을 포함한 예시 코드입니다.

Container(
  width: 200,
  height: 40,
  child: CustomPaint(
    painter: SuperellipseShape(),
    child: Center(
      child: TextField(
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: '검색',
          hintStyle: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
)

위 코드를 통해, superellipse 모양을 가진 배경에 TextField를 중앙에 배치하여 독특하고 세련된 검색 창을 디자인할 수 있습니다.

플러터 앱에서 superellipse 모양을 활용하여 검색 창을 디자인하는 방법을 알아보았습니다. 이를 활용하여 앱의 사용자 경험을 더욱 향상시킬 수 있습니다.