[flutter] 플러터 Lottie로 영화 정보 앱의 예고편 애니메이션 추가하기

05 Dec 2023

flutter

플러터는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 매우 인기있는 프레임워크입니다. 이번 블로그 포스트에서는 플러터의 Lottie 플러그인을 사용하여 영화 정보 앱에 예고편 애니메이션을 추가하는 방법을 알아보겠습니다.

1. Lottie 플러그인 설치하기

먼저, 플러터 프로젝트에 Lottie 플러그인을 추가해야 합니다. 이를 위해서는 pubspec.yaml 파일을 열고 dependencies 섹션에 다음 코드를 추가합니다:

dependencies:
  lottie: <버전>

<버전>은 사용할 수 있는 최신 버전으로 변경해야 합니다. 그런 다음, 터미널에서 flutter pub get 명령어를 실행하여 종속성을 설치합니다.

2. Lottie 파일 가져오기

예고편 애니메이션을 보여줄 Lottie 파일을 가져와야 합니다. Lottie 파일은 애프터 이펙트 등의 디자인 도구를 사용하여 생성할 수 있습니다. 인터넷에서 무료 또는 유료의 Lottie 파일을 찾을 수도 있습니다.

Lottie 파일을 다운로드한 후, 프로젝트의 애셋 폴더 (assets 폴더)에 저장합니다.

3. Lottie 애니메이션 추가하기

이제 Lottie 플러그인을 사용하여 앱에 예고편 애니메이션을 추가해봅시다.

pubspec.yaml 파일에서 다음 코드를 추가하여 Lottie 애니메이션 파일을 애플리케이션에 포함시킵니다:

flutter:
  assets:
    - assets/<lottie_파일>.json

<lottie_파일>은 Lottie 애니메이션 파일의 경로와 파일 이름으로 변경해야 합니다.

예고편 애니메이션을 표시할 화면 위젯을 만듭니다. 예를 들어, MovieTrailerScreen 클래스를 생성합니다:

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

class MovieTrailerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('예고편'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/<lottie_파일>.json',
          repeat: true,
          reverse: false,
          animate: true,
          width: 300,
          height: 300,
        ),
      ),
    );
  }
}

예고편 애니메이션 화면을 호출하는 버튼을 추가합니다. 예를 들어, MovieDetailsScreen 위젯에 버튼을 추가할 수 있습니다:

import 'package:flutter/material.dart';

class MovieDetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('영화 정보'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('영화 제목'),
            Text('영화 설명'),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MovieTrailerScreen(),
                  ),
                );
              },
              child: Text('예고편 보기'),
            ),
          ],
        ),
      ),
    );
  }
}

결론

위의 단계를 따라하면 플러터 Lottie 플러그인을 사용하여 영화 정보 앱에 예고편 애니메이션을 추가할 수 있습니다. 애니메이션 파일을 가져오고, Lottie 플러그인을 설치하고, 예고편 애니메이션 화면을 할당하는 단계를 따라야 합니다. 이를 통해 앱을 훨씬 동적이고 시각적으로 흥미로운 것으로 만들 수 있습니다.

더 많은 관련 자료를 찾으려면 Lottie 플러그인 문서를 참조하십시오.