안녕하세요! 이번에는 Flutter 앱에 동적 애니메이션을 추가하는 방법에 대해 알아보겠습니다. Flutter에서는 Lottie를 사용하여 After Effects나 Bodymovin을 통해 생성된 JSON 파일을 가져와 애니메이션을 재생할 수 있습니다. 이번 예제에서는 쇼핑 앱에 상품 추가 시 나타나는 동적 애니메이션을 구현해보겠습니다.

Step 1: Lottie 패키지 추가하기

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

dependencies:
  lottie: ^1.1.0

변경된 내용을 반영하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

Step 2: JSON 애니메이션 파일 가져오기

Lottie에서 사용할 JSON 애니메이션 파일을 준비해야 합니다. bodymovin에서 After Effects로 생성된 JSON 파일을 가져와서 사용할 수 있습니다. JSON 파일을 assets 폴더에 저장해주세요.

Step 3: 애니메이션 위젯 생성하기

이제 Flutter 코드에서 Lottie 애니메이션을 사용하기 위해 애니메이션 위젯을 생성해보겠습니다.

import 'package:lottie/lottie.dart';

class ProductAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/product_animation.json',
      width: 200,
      height: 200,
      fit: BoxFit.cover,
    );
  }
}

애니메이션 위젯을 사용하고자 하는 화면으로 이동하여 ProductAnimation 위젯을 추가해주세요. 이제 애니메이션이 재생될 준비가 끝났습니다.

Step 4: 애니메이션 트리거하기

이제 해당 애니메이션을 트리거할 위치를 정의해야 합니다. 예를 들어, 상품 추가 버튼을 눌렀을 때 애니메이션을 재생하도록 설정해보겠습니다.

class ProductScreen extends StatelessWidget {
  void _addProduct() {
    // 상품 추가 로직 실행

    // 애니메이션 재생
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: ProductAnimation(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('쇼핑 앱'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: _addProduct,
          child: Text('상품 추가'),
        ),
      ),
    );
  }
}

위 예제 코드에서는 _addProduct 함수 내에서 ProductAnimation 위젯을 showDialog로 보여주도록 설정했습니다. 이제 상품 추가 버튼을 누르면 애니메이션이 나타나게 됩니다.

결론

위 예제를 통해 플러터에서 Lottie 패키지를 사용하여 동적 애니메이션을 쉽게 추가하는 방법을 배웠습니다. 이제 쇼핑 앱이나 다른 플러터 프로젝트에서 Lottie를 활용해보세요. 플러터의 다양한 애니메이션 기능을 사용하여 앱을 보다 흥미로운 디자인으로 꾸밀 수 있습니다.