[flutter] 플러터 앱에서 superellipse 모양을 활용한 알림 및 알림 버튼 디자인하기

15 Dec 2023

flutter

플러터 앱을 개발할 때 알림 및 알림 버튼의 디자인은 중요한 부분입니다. superellipse(수퍼 타원) 모양을 활용하여 미려하고 현대적인 디자인을 구현할 수 있습니다. 이번 포스트에서는 플러터를 사용하여 superellipse 모양을 활용한 알림 및 알림 버튼을 디자인 하는 방법에 대해 알아보겠습니다.

1. superellipse 모양 라이브러리 설치

먼저, superellipse 모양을 구현하기 위해 superellipse 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 라이브러리를 추가합니다.

dependencies:
  superellipse: ^0.3.0

위의 코드는 pubspec.yaml 파일에 추가되어야 합니다. 그리고 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받습니다.

2. 알림 버튼 디자인

superellipse 라이브러리를 사용하여 다음과 같이 알림 버튼을 디자인할 수 있습니다.

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

class NotificationButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Superellipse(
      child: FlatButton(
        onPressed: () {
          // 알림 버튼을 클릭했을 때 실행될 동작
        },
        color: Colors.blue,
        child: Text(
          '알림 받기',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      borderRadius: BorderRadius.circular(20),
    );
  }
}

위의 코드에서 Superellipse 위젯을 사용하여 알림 버튼을 디자인하고 있습니다. borderRadius 속성을 이용하여 superellipse 모양을 나타냅니다.

3. 알림 디자인

알림을 표시하는 부분도 superellipse 모양을 사용하여 디자인할 수 있습니다.

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

class NotificationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Superellipse(
      borderRadius: BorderRadius.circular(20),
      child: Container(
        padding: EdgeInsets.all(10),
        color: Colors.grey[200],
        child: Text(
          '새로운 알림이 도착했습니다!',
          style: TextStyle(
            color: Colors.black,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}

Superellipse 위젯을 사용하여 알림을 디자인하였습니다. 위와 같은 방법으로 알림 및 알림 버튼을 superellipse 모양을 활용하여 디자인할 수 있습니다.

superellipse 모양을 활용하면 플러터 앱의 디자인을 더욱 매끄럽고 세련된 느낌으로 만들 수 있습니다. 다양한 형태와 색상을 활용하여 사용자들이 눈여겨 볼만한 디자인을 구현해 보세요!