[flutter] 페이지 전환시 클리퍼 애니메이션 구현 방법

05 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 페이지 전환시 클리퍼 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Flutter에서는 페이지 전환을 위해 PageRouteBuilder 또는 PageRoute를 사용합니다. 이를 활용하여 클리퍼 애니메이션을 구현할 수 있습니다.

import 'package:flutter/material.dart';

class ClipperTransition extends PageRouteBuilder {
  final Widget child;

  ClipperTransition({required this.child})
    : super(
        transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
          return ClipPath(
            clipper: MyClipper(animation.value),
            child: child,
          );
        },
        pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
          return child;
        }
      );
}

class MyClipper extends CustomClipper<Path> {
  final double progress;

  MyClipper(this.progress);

  @override
  Path getClip(Size size) {
    final path = Path();
    final startPoint = Offset(0, 0);
    final endPoint = Offset(size.width, size.height * progress);
    path.lineTo(startPoint.dx, startPoint.dy);
    path.lineTo(endPoint.dx, endPoint.dy);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

위의 예제 코드는 ClipperTransition 클래스를 정의하여 클리퍼 애니메이션을 구현합니다. ClipperTransition은 PageRouteBuilder를 상속받으며, transitionsBuilder와 pageBuilder를 오버라이딩하여 클리퍼 애니메이션을 적용합니다.

MyClipper 클래스는 CustomClipper<Path>를 상속받아 클리퍼를 생성하고, getClip 함수에서 애니메이션 값에 따라 클리퍼의 형태를 변경합니다.

애니메이션을 적용할 페이지 전환 시에는 ClipperTransition을 사용하여 Navigator.push나 Navigator.pushReplacement 등의 함수를 호출하면 됩니다.

Navigator.push(context, ClipperTransition(child: SecondPage()));

위와 같이 코드를 작성하여 페이지 전환시 클리퍼 애니메이션을 구현할 수 있습니다. 이를 활용하여 다양한 페이지 전환 효과를 구현해보세요!

참고 자료: