안녕하세요! 이번에는 플러터(Flutter)를 사용하여 업적 앱에서 달성 애니메이션을 표시하는 방법에 대해 알아보겠습니다. 업적 앱에서 달성한 업적을 시각적으로 표현하는 것은 사용자들에게 성취감을 주는 좋은 방법입니다. Lottie는 애프터이펙트(After Effects)에서 만든 애니메이션을 플러터 앱에 쉽게 통합할 수 있도록 도와주는 라이브러리입니다.

1. Lottie 패키지 설치하기

먼저, 플러터 프로젝트에 Lottie 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.1

변경 사항을 저장한 뒤, 패키지를 가져오기 위해 터미널에서 flutter pub get 명령어를 실행해주세요.

2. Lottie 파일 준비하기

Lottie에서 사용할 애니메이션 파일을 준비해야 합니다. 이 파일은 JSON 형식으로 애프터이펙트에서 내보낼 수 있습니다. 준비한 애니메이션 파일을 프로젝트의 assets 폴더에 저장해주세요.

3. Lottie 애니메이션 표시하기

이제, Lottie를 사용하여 애니메이션을 표시하는 코드를 작성해보겠습니다. 다음은 예시 코드입니다:

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

class AchievementScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('업적 달성'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/achievement_animation.json',
              width: 200,
              height: 200,
            ),
            SizedBox(height: 16),
            Text(
              '축하합니다! 업적을 달성하였습니다!',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 Lottie.asset 위젯을 사용하여 애니메이션 파일을 표시합니다. assets/achievement_animation.json는 프로젝트에 저장된 애니메이션 파일의 경로입니다. 애니메이션의 크기는 width와 height 속성을 사용하여 조정할 수 있습니다. 이와 함께 업적 달성 메시지를 표시하기 위해 Text 위젯을 사용합니다.

4. 업적 달성 화면으로 이동하기

이제, 업적 달성 화면으로 이동하기 위해 해당 위젯을 호출하는 코드를 작성해야 합니다. 예를 들어, 업적 목록 화면에서 특정 업적을 달성하면 업적 달성 화면으로 이동할 수 있습니다. 다음은 예시 코드입니다:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => AchievementScreen()),
);

위 코드는 Navigator.push 메서드를 사용하여 현재 화면에서 AchievementScreen 위젯으로 이동하는 코드입니다.

마무리

플러터 Lottie를 사용하면 업적 앱에서 달성 애니메이션을 손쉽게 구현할 수 있습니다. 해당 애니메이션 파일을 준비하고 Lottie 패키지를 설치한 뒤, 애니메이션을 표시할 위젯을 작성하는 것으로 간단하게 구현할 수 있습니다. 성취감을 더해주는 시각적인 효과를 통해 사용자들의 만족도를 높일 수 있습니다.

참고 자료: Flutter Lottie GitHub repository