[flutter]자취의 정석 -2 : Lottie JSON을 이용한 애니메이션 구현

와! 귀엽다!

 

자취의 정석  핵심 아이콘인 집먼지를 움직이기 위해 여러가지 방법을 찾아봤다

 

그중에 용량도 이미지파일보다 적고, 크기도 자유롭게 조절할수 있는 로티를 사용하기로 했다

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

Lottie 애니메이션은 무엇일까요? - 로티파일즈

 

이미지 용량때문에 에니메이션 구현을 어떻게 최적화 해야하나 고민이있지만 이런 좋은 라이브러리가 있어서 간단하게 해결할 수 있었다.

 

방법은 flutter pub add lottie로 설치해주고 애니메이션을 로티 json으로 만든 후 넣어주기만 하면 된다. 

 

 

 

1) 패키지 추가

flutter pub add lottie

2) JSON 파일로 저장 후 에셋 재생(권장)

• 위 JSON을 assets/lottie/fire.json로 저장
• pubspec.yaml

flutter:
  assets:
    - assets/lottie/fire.json

• 위젯

import 'package:lottie/lottie.dart';
...
Scaffold(
  appBar: AppBar(title: const Text('Lottie 재생')),
  body: Center(
    child: Lottie.asset(
      'assets/lottie/fire.json',
      repeat: true,     // 반복
      animate: true,    // 자동재생
      // reverse: true,  // 필요 시
    ),
  ),
);

3) 문자열로 메모리에서 바로 재생(파일 저장 없이)

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
import 'package:lottie/lottie.dart';

class LottieFromString extends StatefulWidget {
  const LottieFromString({super.key});
  @override
  State<LottieFromString> createState() => _LottieFromStringState();
}

class _LottieFromStringState extends State<LottieFromString> {
  Uint8List? bytes;

  @override
  void initState() {
    super.initState();
    _load();
  }

  Future<void> _load() async {
    // 예: assets/config/anim.json 안에 전체 Lottie JSON 문자열 저장
    final jsonStr = await rootBundle.loadString('assets/config/anim.json');
    setState(() => bytes = Uint8List.fromList(utf8.encode(jsonStr)));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lottie 메모리 재생')),
      body: Center(
        child: bytes == null
            ? const CircularProgressIndicator()
            : Lottie.memory(bytes!, repeat: true, animate: true),
      ),
    );
  }
}