[flutter] superellipse 모양을 활용한 플러터 앱의 버튼 클릭 효과 설정 방법

15 Dec 2023

flutter

Flutter 앱에서 사용자에게 더 흥미로운 버튼 클릭 효과를 제공하고 싶다면 superellipse 모양을 활용하여 버튼을 꾸밀 수 있습니다. 이 효과는 기존의 원형 또는 사각형 버튼보다 더 독특하게 보이며, 사용자 경험을 향상시킬 수 있습니다.

1. 슈퍼엘립스 모양 버튼 라이브러리 추가

먼저, 프로젝트의 pubspec.yaml 파일에 다음과 같이 superellipse_shape 라이브러리를 추가합니다.

dependencies:
  superellipse_shape: ^0.2.0

이후 터미널에서 flutter pub get 명령어를 사용하여 라이브러리를 다운로드합니다.

2. 슈퍼엘립스 모양 버튼 생성

다음으로, superellipse_shape 라이브러리를 사용하여 슈퍼엘립스 모양의 버튼을 생성합니다. 아래는 간단한 예시 코드입니다.

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

class SuperellipseButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: SuperellipseShape(
          borderRadius: BorderRadius.circular(16),
          superellipse: Superellipse()
        ),
        color: Colors.blue,
      ),
      child: MaterialButton(
        onPressed: () {
          // 버튼 클릭 시 수행할 동작
        },
        child: Text('슈퍼엘립스 버튼'),
      ),
    );
  }
}

위 코드에서는 superellipse_shape 라이브러리를 사용하여 SuperellipseButton 위젯을 만들고, 해당 버튼 클릭 시 수행할 동작을 정의했습니다.

3. 슈퍼엘립스 모양 버튼 사용

마지막으로, 이제 SuperellipseButton 위젯을 사용하여 슈퍼엘립스 모양의 버튼을 화면에 추가할 수 있습니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슈퍼엘립스 버튼 예제'),
      ),
      body: Center(
        child: SuperellipseButton(),
      ),
    );
  }
}

위의 예제 코드를 통해, 슈퍼엘립스 모양을 활용한 버튼 클릭 효과를 설정할 수 있습니다.

더 많은 사용 방법 및 옵션에 대한 자세한 내용은 superellipse_shape 라이브러리 문서를 참고하시기 바랍니다.