[플러터 개발] Lottie 패키지를 이용한 애니메이션 추가하기

오늘은 Lottie 파일을 이용해서 화면에 애니메이션을 추가하는 것을 구현해 볼거에요.

먼저 새로운 프로젝트를 만들고, 패키지를 다운로드 받아줘야겠죠?

패키지 다운로드

https://pub.dev/packages/lottie

lottie | Flutter Package

패키지 적용방법을 모르시는 분들은 아래 패키지 다운로드 방법 게시물을 참고해주세요.

[플러터 기초] 패키지 다운로드 하는 방법

[플러터 기초] 패키지 다운로드 하는 방법

 

Lottie 파일 다운로드 사이트

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

애니메이션들을 구경하고 다운로드 받을 수 있는 사이트입니다.

여기서 원하시는 파일을 다운로드 받아볼거에요.

Lottie 파일 다운 받아보기

저는 phone을 검색해서 관련된 애니메이션을 다운 받아 볼게요.

phone을 검색해서 아래 빨간 박스로 표시한 애니메이션을 선택했습니다.

그러면 아래와 같은 화면이 나올텐데, 오른쪽 상단에 있는 Download 버튼을 눌러주시고, Save to workspace to download 버튼을 눌러주세요.

 

그러면 아래와 같은 페이지로 이동할텐데, 오른쪽에 나와 있는 Lottie JSON파일을 다운로드 받아줍니다.

그럼 JSON파일이 다운로드 될겁니다. 원하는 이름으로 바꿔 주세요.

 

화면에 그리기

프로젝트에 json파일 추가하기

우선 프로젝트 최상단에 우클릭해서 새 디렉토리를 만들어 assets폴더를 만들고, 그 안에 animations 폴더를 만들어 json파일을 넣어 놓을게요.

그런 다음 pubspec.yaml파일에 들어가서 이 파일을 인식할 수 있도록 아래와 같이 작성해줍니다.

그러면 모든게 끝났습니다. 이제 사용해볼까요?

화면에 그려보기

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Lottie_test(),
    );
  }
}

class Lottie_test extends StatelessWidget {
  const Lottie_test({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        alignment: Alignment.center,
        child: Lottie.asset("assets/animations/call.json"),
      ),
    );
  }
}

여기서 패키지를 이용한 줄은

Lottie.asset("assets/animations/[Lottie파일 이름].json")

입니다.

그러면 화면에 그려질 겁니다!

결과 화면

결과 화면