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

05 Dec 2023

flutter

플러터는 UI 개발을 위한 인기 있는 프레임워크로, 다양한 애니메이션 효과를 구현할 수 있습니다. 이번 글에서는 클리퍼(clipper)를 이용하여 플러터 앱의 버튼에 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

1. 클리퍼(clipper)란?

클리퍼는 플러터에서 사용되는 커스텀 그래픽 모양을 만들어주는 기능입니다. 이를 이용하면 버튼이나 다른 위젯의 모양을 자유롭게 변형시킬 수 있으며, 애니메이션 효과를 적용할 때 유용하게 사용할 수 있습니다.

2. 클리퍼(clipper)를 이용한 애니메이션 구현 방법

아래는 클리퍼를 이용하여 버튼에 애니메이션 효과를 구현하는 예제 코드입니다.

import 'package:flutter/material.dart';

class AnimatedButton extends StatefulWidget {
  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton> with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_animationController.status == AnimationStatus.completed) {
          _animationController.reverse();
        } else {
          _animationController.forward();
        }
      },
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return ClipPath(
            clipper: ButtonClipper(_animationController.value),
            child: Container(
              height: 50,
              width: 150,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Click Me',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class ButtonClipper extends CustomClipper<Path> {
  final double animationValue;

  ButtonClipper(this.animationValue);

  @override
  Path getClip(Size size) {
    final path = Path();
    final curveValue = Curves.easeInOut.transform(animationValue);

    path.lineTo(0, size.height);
    path.lineTo(size.width * 0.2, size.height - 20 * curveValue);
    path.lineTo(size.width * 0.8, size.height - curveValue * 40);
    path.lineTo(size.width, size.height);

    path.lineTo(size.width, 0);
    path.lineTo(size.width * 0.8, 20 * curveValue);
    path.lineTo(size.width * 0.2, curveValue * 40);
    path.lineTo(0, 0);

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

위의 코드는 AnimatedButton 위젯을 정의합니다. 이 위젯은 onTap 이벤트에 따라 애니메이션을 제어하며, AnimatedBuilder와 ClipPath를 이용하여 버튼의 모양을 변형시킵니다. ButtonClipper는 클리퍼를 정의하는 커스텀 클래스로, getClip 메소드에서 모양을 정의하고, shouldReclip 메소드에서 클리퍼의 상태를 갱신합니다.

3. 애니메이션 구현 결과

위의 코드를 실행하면, 클릭할 때마다 버튼이 부드럽게 변형되는 애니메이션이 적용된 버튼을 확인할 수 있습니다.

Animated Button

4. 결론

이번 글에서는 클리퍼를 이용하여 플러터 앱의 버튼에 애니메이션 효과를 구현하는 방법을 알아보았습니다. 클리퍼를 사용하면 다양한 커스텀 모양을 만들고, 애니메이션 효과를 적용할 수 있으므로, 플러터에서 UI 개발을 할 때 참고할 만한 기능입니다.

더 자세한 내용은 공식 플러터 문서를 참고하세요.