[flutter] 클리퍼를 이용한 플러터 앱 버튼 애니메이션 구현 방법

05 Dec 2023

flutter

안녕하세요! 오늘은 플러터 앱에서 버튼 애니메이션을 구현하는 방법에 대해 알아보겠습니다. 이번에는 클리퍼(clipper)를 사용하여 버튼에 독특한 모양을 만들고 애니메이션 효과를 적용하는 방법을 알아보겠습니다.

1. 클리퍼(clipper)란?

클리퍼는 플러터에서 사용되는 커스텀 쉐이프를 만들기 위한 클래스입니다. 클리퍼를 사용하면 기본적인 도형 이외에도 원하는 모양을 만들 수 있습니다.

2. 버튼 디자인 및 애니메이션 구현

먼저, 원하는 디자인을 가진 버튼을 생성하고자 합니다. 예시를 위해 원형 버튼을 만들어보겠습니다.

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: FlatButton(
        onPressed: () {
          // 버튼 클릭 시 실행될 동작
        },
        child: Icon(
          Icons.play_arrow,
          size: 50,
        ),
        shape: CircleBorder(),
        color: Colors.blue,
      ),
    );
  }
}

위의 예제에서는 Container 위젯을 사용하여 버튼의 크기를 조정하고, FlatButton을 사용하여 버튼을 생성하였습니다.

이제 클리퍼를 이용하여 버튼에 독특한 모양을 만들고 애니메이션을 적용해보겠습니다.

import 'package:flutter/material.dart';

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _animation = Tween<double>(begin: 1, end: 0.9).animate(_animationController);

    _animationController.repeat(reverse: true);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: InkWell(
        onTap: () {
          // 버튼 클릭 시 실행될 동작
        },
        child: AnimatedBuilder(
          animation: _animationController,
          builder: (BuildContext context, Widget child) {
            return Transform.scale(
              scale: _animation.value,
              child: Icon(
                Icons.play_arrow,
                size: 50,
              ),
            );
          },
        ),
        customBorder: CircleBorder(),
        splashColor: Colors.blue.withOpacity(0.5),
      ),
    );
  }
}

위의 예제에서는 StatefulWidget를 사용하여 상태를 관리하고, AnimationController 및 Animation을 이용하여 애니메이션을 생성하였습니다. Transform.scale을 사용하여 버튼의 크기가 애니메이션에 따라 변경되도록 하였습니다.

3. 클리퍼(clipper)를 사용한 버튼 모양 커스터마이징

이제 클리퍼를 사용하여 버튼의 모양을 커스터마이징 해보겠습니다. 예시로 반원 모양의 버튼을 만들어보겠습니다.

import 'package:flutter/material.dart';

class HalfCircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width, 0.0);
    path.arcToPoint(
      Offset(0.0, size.width / 2),
      radius: Radius.circular(size.width / 2),
      clockwise: false,
    );
    path.close();
    return path;
  }

  @override
  bool shouldReclip(HalfCircleClipper oldClipper) => false;
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: FlatButton(
        onPressed: () {
          // 버튼 클릭 시 실행될 동작
        },
        child: Icon(
          Icons.play_arrow,
          size: 50,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(50),
          side: BorderSide(color: Colors.blue),
          clipper: HalfCircleClipper(),
        ),
        color: Colors.blue,
      ),
    );
  }
}

위의 예시에서는 CustomClipper를 상속받은 HalfCircleClipper를 정의하여 반원 모양의 클리퍼를 구현하였습니다. RoundedRectangleBorder의 clipper 속성에 클리퍼를 지정하여 모양을 적용하였습니다.

참고 자료

이상으로 클리퍼를 이용한 플러터 앱 버튼 애니메이션 구현 방법에 대해 알아보았습니다. 독특한 모양의 버튼을 만들어 사용자에게 시각적으로 흥미로운 경험을 제공해보세요. 감사합니다!