[flutter] superellipse 모양을 이용한 플러터 앱의 로그인 화면 디자인 방법

15 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 강력한 UI 설계와 빠른 개발 속도로 유명합니다. 이번에는 superellipse 모양을 이용하여 플러터 앱의 로그인 화면을 디자인하는 방법을 알아보겠습니다.

1. superellipse란?

superellipse(슈퍼엘립스)는 직사각형의 각을 둥글게 하는 대신 더 부드럽게 만든 형태로, 빠르고 부드러운 그라데이션과 같은 모양을 만들어냅니다.

2. superellipse를 이용한 로그인 화면 디자인

아래 예시는 superellipse를 사용하여 로그인 화면의 텍스트 필드와 버튼을 디자인하는 예제 코드입니다.

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(20.0), // 테두리를 둥글게 만듦
    ),
  ),
  child: TextField(
    decoration: InputDecoration(
      hintText: '이메일',
      border: InputBorder.none,
      contentPadding: EdgeInsets.all(20.0),
    ),
  ),
),

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.superellipse(16.0), // superellipse 모양을 적용
    ),
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.green],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
  ),
  child: MaterialButton(
    onPressed: () {
      // 버튼 클릭 시 로그인 로직
    },
    child: Text(
      '로그인',
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
),

3. 마치며

위 코드는 superellipse를 사용하여 로그인 화면을 디자인하는 간단한 예시입니다. superellipse 형태를 활용하여 UI를 더욱 부드럽고 모던하게 디자인할 수 있습니다. 플러터를 사용하여 다양한 모양과 디자인을 시도해보세요!