Flutter 움직이는 그림(Lottie) 넣기

Flutter 움직이는 그림(Lottie) 넣기

이번에는 Lottie 를 활용한 움직이는 그림 넣는 방법에 대해 알아보겠다.

사용법은 매우매우 간단하다.

 

동작 원리

1. pubspec.yaml 추가 (lottie)

2. 파일 추가

---

 

1. pubspec.yaml 추가 (lottie)

dependencies:
  flutter:
    sdk: flutter
  lottie:

 

2. 파일 추가

ListView(
  shrinkWrap: true,
  children: <Widget>[
    // Load a Lottie file from your assets
    Lottie.asset('assets/LottieLogo1.json'),

    // Load a Lottie file from a remote url
    Lottie.network(
    'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

    // Load an animation and its images from a zip file
    Lottie.asset('assets/lottiefiles/angel.zip'),
  ],
)

 

결과 화면

아주 간단히 움직이는 이미지 추가가 가능하다 (앱 시작화면인 splash screen 에 활용하면 좋을 것 같다.

 

전체 소스

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

class UseLottie extends StatefulWidget {
  @override
  _UseLottieState createState() => _UseLottieState();
}

class _UseLottieState extends State<UseLottie> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBarWidget('Lottie image'),
      body: ListView(
        shrinkWrap: true,
        children: <Widget>[
          // Load a Lottie file from your assets
          Lottie.asset('assets/LottieLogo1.json'),

          // Load a Lottie file from a remote url
          Lottie.network(
              'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

          // Load an animation and its images from a zip file
          Lottie.asset('assets/lottiefiles/angel.zip'),
        ],
      )
    );
  }
}