[flutter] velocity_x를 사용하여 어떻게 쿠폰 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

개요

이번 튜토리얼에서는 Flutter의 유용한 패키지인 velocity_x를 사용하여 쿠폰 애니메이션을 만드는 방법에 대해 알아보겠습니다. velocity_x는 Flutter 앱 개발을 더욱 쉽게 만들어주는 확장 패키지입니다.

필요한 패키지 설치

velocity_x 패키지를 사용하기 위해 먼저 의존성을 추가해야 합니다. pubspec.yaml 파일에 다음 코드를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

의존성을 추가한 후, 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행하세요:

flutter pub get

쿠폰 애니메이션 구현

필요한 패키지를 import합니다:

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

쿠폰 애니메이션을 구현할 StatefulWidget을 생성합니다. 이 예시에서는 CouponAnimationWidget이라는 이름을 사용하도록 하겠습니다:

class CouponAnimationWidget extends StatefulWidget {
  @override
  _CouponAnimationWidgetState createState() => _CouponAnimationWidgetState();
}

class _CouponAnimationWidgetState extends State<CouponAnimationWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

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

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

  @override
  Widget build(BuildContext context) {
    return VxAnimatedBox(
      width: 200,
      height: 100,
      child: FlutterLogo(size: 50),
      duration: Duration(seconds: 1),
      curve: Curves.easeInOut,
    ).rotate(_animationController.drive(CurveTween(curve: Curves.linear)).drive(Tween(begin: 0, end: 360)));
  }
}

쿠폰 애니메이션을 보여주고 싶은 화면에 CouponAnimationWidget을 추가합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Coupon Animation'),
        ),
        body: Center(
          child: CouponAnimationWidget(),
        ),
      ),
    );
  }
}

실행

이제 앱을 실행해보면 쿠폰 애니메이션이 재생되는 것을 확인할 수 있습니다!

결론

velocity_x를 사용하여 쿠폰 애니메이션을 만드는 방법에 대해 알아보았습니다. velocity_x는 Flutter 앱 개발을 더욱 편리하게 만들어주는 많은 기능들을 제공합니다. 자세한 내용은 velocity_x의 공식 문서를 참고해보세요.

참고 자료

velocity_x 패키지: https://pub.dev/packages/velocity_x