11. [Flutter] 움직이는 이미지 사용하기 (with Lottie)

.NET MAUI에서도 움직이는 이미지를 사용할 수 있도록 제공해 줬던 Lottie를 Flutter에서도 사용가능합니다.

---

1. Lottie 라는 패키지를 설치해줍니다.

 

- 설치링크: https://pub.dev/packages/lottie

lottie | Flutter Package

pubspec.yaml 에 작성하여 lottie 설치

 

---

2. Lottie 홈페이지에 가서 마음에 드는 움직이는 이미지를 클릭하여 사용가능한 url를 복사합니다.

- Lottie링크: https://lottiefiles.com/featured

Featured animations from our community

 

 

 

---

3. 아래와 같이 위젯을 추가해 줍니다.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: [
          Row(
            children: [
              Container(
                decoration: const BoxDecoration(
                    borderRadius:
                        BorderRadiusDirectional.all(Radius.elliptical(20, 20))),
                height: 200,
                child: Lottie.network(
                    'https://assets6.lottiefiles.com/packages/lf20_touohxv0.json',
                    frameRate: FrameRate(60),
                    repeat: false),
              ),
              Container(
                decoration: const BoxDecoration(
                    borderRadius:
                        BorderRadiusDirectional.all(Radius.elliptical(20, 20))),
                child: Lottie.network(
                    'https://assets6.lottiefiles.com/private_files/lf30_bunlnbcp.json',
                    height: 200,
                    frameRate: FrameRate(60),
                    repeat: false),
              )
            ],
          )
        ],
      ),
    ));
  }
}

---

설명.1

 Lottie.network(

                    'https://assets6.lottiefiles.com/private_files/lf30_bunlnbcp.json',

                    height: 200,

                    frameRate: FrameRate(60),

                    repeat: false)

- Lottie.network() 위젯을 이용하여 Lottie 홈페이지에서 복사한 .json url를 붙여 넣습니다.

 

[속성 설명]

1. animation : Lottie 애니메이션 파일의 경로나 URL을 지정합니다.
2. controller : Lottie 애니메이션을 제어하는 컨트롤러입니다. 컨트롤러를 사용하면 애니메이션을 일시 중지, 재생, 반복 등을 제어할 수 있습니다.
3. repeat : 애니메이션의 반복 여부를 지정합니다. true로 설정하면 반복됩니다.
4. reverse : 애니메이션을 역으로 재생할지 여부를 지정합니다.
5. animate : 애니메이션을 재생할지 여부를 지정합니다. true로 설정하면 애니메이션이 재생됩니다.
6. width : 애니메이션의 너비를 지정합니다.
7. height : 애니메이션의 높이를 지정합니다.
8. fit : 애니메이션의 크기를 조정하는 방법을 지정합니다. BoxFit 열거형 값을 사용할 수 있습니다.
9. alignment : 애니메이션의 정렬 방법을 지정합니다.
10. color : 애니메이션 내에서 사용되는 색상을 변경할 수 있습니다.
11. composition : Lottie 애니메이션 파일 내의 특정 컴포지션을 선택할 수 있습니다.

 

---

빌드된 모습.

 

빌드 완료