[flutter] 플러터 커스텀 클리퍼와 애니메이션을 함께 사용하는 방법

05 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 커스텀 클리퍼(Custom Clipper)와 애니메이션(Animation)을 함께 사용하는 방법에 대해 알아보겠습니다.

1. 커스텀 클리퍼 생성하기

먼저, 커스텀 클리퍼를 생성하여 애니메이션 효과를 부여할 영역을 정의해야 합니다. 다음은 간단한 디자인의 커스텀 클리퍼 예시입니다.

class CustomClipperExample extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height * 0.8);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

위 코드에서는 CustomClipper<Path> 클래스를 상속하여 커스텀 클리퍼를 생성합니다. getClip 메소드를 오버라이드하여 클리핑할 영역의 Path를 정의하고, shouldReclip 메소드를 오버라이드하여 클리퍼가 재생성되어야 하는지 여부를 반환합니다.

2. 애니메이션 적용하기

이제 애니메이션을 적용하여 커스텀 클리퍼의 형태를 변경해보겠습니다. Flutter에서는 AnimationController와 AnimatedBuilder를 함께 사용하여 애니메이션을 제어할 수 있습니다. 다음은 애니메이션을 적용하는 코드 예시입니다.

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return ClipPath(
          clipper: CustomClipperExample(),
          child: Container(
            color: Colors.blue,
            width: 200,
            height: 200,
            alignment: Alignment.center,
            child: Text(
              '애니메이션',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        );
      },
    );
  }
}

위 코드에서는 AnimationController를 생성하여 애니메이션의 시간과 제어를 담당합니다. initState 메소드에서 _controller.repeat을 호출하여 애니메이션을 반복하도록 설정하고, _animation 변수를 CurvedAnimation으로 초기화하여 애니메이션의 변화를 부드럽게 조절합니다.

AnimatedBuilder 위젯을 사용하여 _animation을 리스닝하고, 그에 따라 ClipPath 위젯을 업데이트합니다. 이렇게 함으로써 애니메이션이 적용된 커스텀 클리퍼가 화면에 나타납니다.

3. 결과 확인하기

애니메이션을 적용한 커스텀 클리퍼가 정상적으로 동작하는지 확인하기 위해 위젯을 화면에 렌더링할 수 있습니다. 예를 들어 MyApp 위젯에 AnimationExample 위젯을 추가하여 결과를 확인할 수 있습니다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('플러터 커스텀 클리퍼와 애니메이션')),
        body: Center(child: AnimationExample()),
      ),
    );
  }
}

위 코드를 실행시켜보면, 애니메이션이 적용된 커스텀 클리퍼가 중앙에 위치한 사각형으로 변화하는 것을 확인할 수 있습니다.

이렇게 플러터 앱에서 커스텀 클리퍼와 애니메이션을 함께 사용하는 방법을 알아보았습니다. 이를 응용하여 다양한 디자인과 효과를 구현할 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하십시오.