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

05 Dec 2023

flutter

velocity_x는 Flutter에서 플러그인으로 사용할 수 있는 강력한 애니메이션 라이브러리입니다. 이 라이브러리를 사용하면 간단하고 부드러운 애니메이션을 만들 수 있습니다. 이 튜토리얼에서는 velocity_x를 사용하여 상품 애니메이션을 만드는 방법을 알아보겠습니다.

velocity_x 패키지 가져오기

먼저 pubspec.yaml 파일에 velocity_x 패키지를 추가해야합니다. 아래 코드를 dependencies 섹션에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.3.1

그런 다음 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

애니메이션 구현하기

이제 애니메이션을 구현할 준비가 되었습니다!

먼저 velocity_x 패키지를 가져옵니다.

import 'package:velocity_x/velocity_x.dart';

그런 다음 AnimatedContainer 위젯을 이용하여 상품 애니메이션을 생성합니다.

class ProductCard extends StatelessWidget {
  final String imageUrl;
  final String name;
  final String price;

  ProductCard({required this.imageUrl, required this.name, required this.price});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 5,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        children: [
          Image.network(imageUrl),
          10.heightBox,
          name.text.lg.bold.make(),
          5.heightBox,
          price.text.xl2.bold.make(),
        ],
      ),
    );
  }
}

위 코드에서 AnimatedContainer 위젯은 duration과 curve 속성을 설정하여 애니메이션의 속도와 곡선을 제어합니다. decoration 속성은 위젯의 배경색, 모서리 반경 및 그림자를 설정할 수 있습니다. 그리고 child 속성을 통해 이미지, 이름 및 가격을 표시합니다.

사용 예제

이제 ProductCard 위젯을 사용하여 상품 애니메이션을 만들 수 있습니다.

ProductCard(
  imageUrl: 'https://example.com/product.jpg',
  name: 'Apple iPhone 13',
  price: '\$999',
).centered().p16().make(),

위 코드에서는 ProductCard 위젯을 생성하고 이를 가운데 정렬한 후 외부 패딩을 추가합니다. 최종적으로 make() 메서드를 호출하여 위젯을 반환합니다.

마무리

velocity_x를 사용하여 간단하고 부드러운 상품 애니메이션을 만들었습니다. 이제 Flutter 애플리케이션에서 다양한 애니메이션을 구현할 수 있습니다. velocity_x의 다양한 기능을 살펴보고 개인적인 요구에 맞게 애니메이션을 커스터마이즈해보세요.

더 많은 정보를 원하시면 velocity_x GitHub 저장소를 참조하십시오.