[flutter] 리퀴드 스와이프 애니메이션의 각도와 크기 조절 방법

18 Dec 2023

flutter

리퀴드 스와이프는 애니메이션을 활용하여 부드럽게 화면을 스와이프하는 기능을 구현할 수 있는데, 각도와 크기를 조절하여 다양한 효과를 낼 수 있습니다.

이번에는 Flutter에서 리퀴드 스와이프 애니메이션의 각도와 크기를 조절하는 방법에 대해 알아보겠습니다.

1. 리퀴드 컨테이너 설정

먼저, liquid_swipe 패키지를 사용하여 리퀴드 스와이프를 구현합니다.

import 'package:liquid_swipe/liquid_swipe.dart';

class MyLiquidSwipe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LiquidSwipe(
      pages: <Widget>[
        Container(color: Colors.blue),
        Container(color: Colors.green),
        Container(color: Colors.red),
      ],
      // 애니메이션 설정
    );
  }
}

2. 애니메이션 설정

리퀴드 스와이프의 애니메이션을 조절하려면 LiquidController를 사용합니다.

class MyLiquidSwipe extends StatelessWidget {
  final liquidController = LiquidController();

  @override
  Widget build(BuildContext context) {
    return LiquidSwipe(
      pages: <Widget>[
        Container(color: Colors.blue),
        Container(color: Colors.green),
        Container(color: Colors.red),
      ],
      ignoreUserGestureWhileAnimating: true,
      liquidController: liquidController,
      // 애니메이션 설정
    );
  }
}

3. 각도와 크기 조절

LiquidController를 통해 리퀴드 스와이프 애니메이션의 각도와 크기를 조절할 수 있습니다.

// 앞 페이지로 이동
liquidController.animateToPage(page: 1, duration: 500, curve: TensionCurve(400, 50, 0, 5));

// 뒷 페이지로 이동
liquidController.animateToPage(page: 0, duration: 500, curve: TensionCurve(400, 50, 0, 5));

// 각도와 크기 설정
liquidController.bounce = 0.2;
liquidController.swipeDirection = Axis.vertical;

리퀴드 스와이프 애니메이션의 각도와 크기를 조절하여 다양한 사용자 경험을 제공할 수 있습니다.

마무리

리퀴드 스와이프 애니메이션은 사용자에게 직관적이고 부드러운 화면 전환 효과를 제공하여 앱의 사용성을 향상시킬 수 있습니다. 각도와 크기를 조절하여 다양한 디자인을 적용해보세요.

이상으로, Flutter에서 리퀴드 스와이프 애니메이션의 각도와 크기를 조절하는 방법에 대해 알아보았습니다. 감사합니다.

참고 링크: