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

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 만들 수 있습니다. 이번 블로그 포스트에서는 클리퍼(Clipper)를 활용하여 플러터 앱의 헤더 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

클리퍼란?

클리퍼는 플러터에서 사용자 정의 모양의 위젯을 만들기 위해 사용하는 클래스입니다. 특정 모양이나 패턴을 가진 위젯을 만들고 싶을 때 클리퍼를 사용하여 원하는 모양을 만들 수 있습니다.

플러터 앱 헤더 애니메이션 구현 방법

먼저, ClipPath 위젯을 사용하여 헤더의 모양을 만듭니다. ClipPath 위젯을 사용하면 원하는 모양을 만들 수 있습니다. 예를 들어, ClipPath를 사용하여 볼록한 모양의 헤더를 만들 수 있습니다.

ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    height: 200,
    color: Colors.blue,
  ),
)

다음으로, CustomClipper 클래스를 작성합니다. 이 클래스는 위젯을 잘라내는 모양을 정의하는 데 사용됩니다. CustomClipper 클래스를 상속받아 getClip()과 shouldReclip() 메서드를 오버라이드하여 원하는 모양을 만들 수 있습니다.

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height - 50);
    path.quadraticBezierTo(
        size.width / 2, size.height, size.width, size.height - 50);
    path.lineTo(size.width, 0);
    return path;
  }

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

마지막으로, AnimatedContainer를 사용하여 헤더 애니메이션을 구현합니다. AnimatedContainer는 애니메이션 동작을 가진 컨테이너 위젯입니다. 이를 사용하여 헤더의 크기나 색상 등을 애니메이션으로 변경할 수 있습니다.

AnimatedContainer(
  duration: Duration(seconds: 1),
  height: _headerHeight,
  color: _headerColor,
)

위의 코드에서 _headerHeight와 _headerColor는 애니메이션을 제어하는 변수입니다. 애니메이션을 시작하기 전에 이 변수들을 변경하여 헤더의 모양을 원하는대로 조절할 수 있습니다.

결론

이렇게 해서 플러터 앱 헤더에 애니메이션을 구현하는 방법에 대해 알아보았습니다. 클리퍼를 활용하면 다양한 모양의 위젯을 만들 수 있으며, AnimatedContainer를 사용하여 애니메이션을 추가할 수 있습니다. 플러터의 다양한 기능을 알아가면서 멋진 앱을 만들어보세요!

클리퍼란?

플러터 앱 헤더 애니메이션 구현 방법

결론

참고 자료