[flutter] 플러터 Lottie로 연락처 앱의 추가 애니메이션 구현하기

05 Dec 2023

이번 프로젝트에서는 플러터의 Lottie 패키지를 사용하여 연락처 앱에 추가 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 오픈 소스 라이브러리로, After Effects 애니메이션을 JSON 파일 형식으로 읽어와서 앱에서 사용할 수 있습니다. 이를 통해 디자이너가 만든 아름다운 애니메이션을 쉽게 앱에 적용할 수 있습니다.

먼저, 프로젝트에 Lottie 패키지를 추가해야 합니다. pubspec.yaml 파일에서 다음과 같이 의존성을 추가해주세요.

dependencies:
  lottie: ^1.1.0

의존성을 추가한 후, 패키지를 다운로드해주세요. 터미널에서 다음 명령어를 실행합니다.

flutter pub get

Lottie를 사용하기 위해서는 애니메이션 파일이 필요합니다. 디자이너가 제작한 애니메이션 파일을 준비하거나, Lottie에서 제공하는 애니메이션 파일을 다운로드할 수 있습니다. 다운로드한 애니메이션 파일을 프로젝트 폴더에 복사해주세요.

이제 Lottie 애니메이션을 앱에 적용해보겠습니다.

우선, lottie 패키지를 임포트해주세요.

import 'package:lottie/lottie.dart';

애니메이션을 사용할 위젯을 생성합니다. 예를 들어, 애니메이션을 적용할 버튼 위젯을 생성하려면 다음과 같이 작성합니다.

RaisedButton(
  onPressed: () {},
  child: Lottie.asset('assets/animations/contacts_animation.json'),
)

위 코드에서 Lottie.asset 메소드의 인자로 애니메이션 파일의 경로를 지정합니다. assets/animations/contacts_animation.json는 애니메이션 파일의 경로를 나타내는 예시입니다. 실제 경로에 맞게 수정해주세요.

앱을 실행하면 버튼에 애니메이션이 표시됩니다.

위의 예제는 간단한 애니메이션을 버튼에 적용한 것이므로, 앱에 따라 추가적인 설정이 필요할 수 있습니다.

예를 들어, 애니메이션의 크기 조정, 반복 재생, 애니메이션 시작/중지 등의 설정을 추가할 수 있습니다. 자세한 내용은 공식 Lottie 문서를 참고해주세요.

이제 플러터의 Lottie 패키지를 사용하여 연락처 앱에 추가 애니메이션을 구현하는 방법을 알게 되었습니다. 이를 통해 앱에 아름다운 애니메이션을 쉽게 추가할 수 있습니다. 이제 직접 앱에 적용해보세요!