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

05 Dec 2023

flutter

플러터에서는 클리퍼(Clipper)를 사용하여 원하는 모양의 커스텀 클리핑을 할 수 있습니다. 이 기능을 활용하면 다양한 모양의 위젯을 만들 수 있습니다. 또한, 애니메이션과 함께 사용하면 동적이고 흥미로운 화면 효과를 구현할 수 있습니다.

커스텀 클리퍼 만들기

먼저, 커스텀 클리퍼를 만들어보겠습니다. CustomClipper 클래스를 상속받아서 getClip 메서드를 오버라이딩하면 됩니다. 이 메서드에서 클리핑할 영역을 지정할 수 있습니다.

예를 들어, 원 모양의 클리퍼를 만든다면 다음과 같이 작성할 수 있습니다.

import 'package:flutter/material.dart';

class CircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.addOval(Rect.fromLTWH(0.0, 0.0, size.width, size.height));
    return path;
  }

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

위의 코드에서는 getClip 메서드에서 Path 객체를 사용하여 원을 그리고 있습니다. Rect.fromLTWH를 사용하여 원의 위치와 크기를 지정합니다. shouldReclip 메서드에서는 클리퍼가 다시 클리핑되어야 할지를 결정합니다. 이 예제에서는 항상 false를 반환하여 다시 클리핑하지 않도록 설정했습니다.

커스텀 클리퍼와 애니메이션 함께 사용하기

이제 만든 커스텀 클리퍼를 애니메이션과 함께 사용하는 방법을 알아보겠습니다.

import 'package:flutter/material.dart';

class AnimatedClipperWidget extends StatefulWidget {
  @override
  _AnimatedClipperWidgetState createState() => _AnimatedClipperWidgetState();
}

class _AnimatedClipperWidgetState extends State<AnimatedClipperWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

    // 애니메이션 컨트롤러 초기화
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    // 애니메이션 설정
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);

    // 애니메이션 시작
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget? child) {
        return ClipPath(
          clipper: CircleClipper(),
          clipBehavior: Clip.antiAlias,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

위의 코드에서는 AnimatedClipperWidget라는 StatefulWidget을 생성합니다. initState 메서드에서는 애니메이션 컨트롤러를 초기화하고 필요한 애니메이션을 설정합니다. 그리고 build 메서드에서는 AnimatedBuilder를 사용하여 애니메이션을 적용합니다. ClipPath 위젯을 사용해서 만든 커스텀 클리퍼를 적용합니다.

결론

플러터에서 커스텀 클리퍼와 애니메이션을 함께 사용하는 방법을 알아보았습니다. 클리퍼를 사용하면 다양한 모양의 위젯을 만들 수 있고, 애니메이션과 함께 사용하면 동적이고 흥미로운 화면 효과를 구현할 수 있습니다. 많은 창조적인 아이디어를 가지고 독특한 애플리케이션을 구현해보세요!

커스텀 클리퍼 만들기

커스텀 클리퍼와 애니메이션 함께 사용하기

결론

참고 자료