[flutter] 플러터 앱에서 superellipse 모양의 버튼을 클릭하는 기능 구현 방법

15 Dec 2023

flutter

플러터(Flutter)로 모바일 앱을 개발하는 경우, superellipse 모양을 가진 버튼을 클릭하는 기능을 구현하려면 다음과 같이 할 수 있습니다.

1. CustomPainter를 사용하여 superellipse 모양의 버튼 디자인하기

먼저, CustomPainter를 활용하여 superellipse 모양의 버튼을 디자인합니다. 예를 들어, 아래와 같이 CustomPainter 클래스를 정의할 수 있습니다.

import 'package:flutter/material.dart';

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

    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(0, 0, size.width, size.height),
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
        ),
        paint);
  }

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

2. GestureDetector를 사용하여 버튼 클릭 기능 구현하기

이제 디자인한 superellipse 버튼 위에 GestureDetector를 사용하여 클릭 기능을 구현합니다.

GestureDetector(
  onTap: () {
    // 클릭 시 실행할 코드
  },
  child: CustomPaint(
    size: Size(100, 50),
    painter: SuperellipseButtonPainter(),
  ),
),

위 코드에서 onTap 콜백 안에 클릭 시 실행할 코드를 작성하면 됩니다.

이제 위 두 가지 단계를 수행하면 superellipse 모양의 버튼을 클릭하는 기능을 구현할 수 있습니다.

참고: Flutter CustomPaint class, Flutter GestureDetector class