[Flutter] Flutter에 움직이는 이미지 넣기 (Lottie)

Lottie란

Airbnb에서 개발한 오픈소스 모바일 라이브러리이다.

JSON 기반의 애니메이션 파일로 gif 같은 다른 형식에 비해 가볍고 벡터 기반이라 확대 축소에 따른 해상도 저하가 없다.

IOS, 안드로이드, 웹, React Native 같은 다양한 플랫폼을 지원한다.

 

Flutter에 적용

1. https://lottiefiles.com/ 에서 원하는 이미지를 찾아서 저장한다.

Discover > Free Ready-to-use Animations에서 무료 이미지를 찾을 수 있다.

 

2. 원하는 이미지를 JSON 파일로 다운로드한다.

 

3. 다운로드 받은 JSON 파일을 assets 디렉토리에 넣어준다.

 

4. pubspec.yaml에 assets 디렉토리 등록

flutter:
  assets: 
    - assets/lottie/

 

5. pubspec.yaml에 Lottie package 추가

dependencies:
  flutter:
    sdk: flutter
  lottie: ^2.2.0

 

6. 적용

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

class LottieTest extends StatefulWidget {
  @override
  _LottieTestState createState() => _LottieTestState();
}

class _LottieTestState extends State<LottieTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Lottie.asset('assets/lottie/sample.json'),
    );
  }
}

 

references

https://lottiefiles.com/kr/what-is-lottie

https://lottiefiles.com/kr/blog/about-lottie/kr-difference-png-svg-lottie