[flutter] 플러터 Lottie 애니메이션 반복 설정하기

lottie

플러터에서 Lottie 애니메이션을 사용하면 앱에 멋진 동적 요소를 추가할 수 있습니다. 하지만 기본적으로 Lottie 애니메이션은 한 번만 재생됩니다. 이번 글에서는 플러터에서 Lottie 애니메이션을 반복해서 재생하는 방법을 알아보겠습니다.

1. Lottie 애니메이션 패키지 추가하기

먼저, pubspec.yaml 파일에 Lottie 애니메이션을 사용하기 위한 패키지를 추가해야 합니다. lottie 패키지를 사용하겠습니다. 아래와 같이 dependencies 섹션에 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

설정이 완료되면 패키지를 가져와서 사용할 수 있습니다. 다음과 같이 main.dart 파일 상단에 lottie 패키지를 가져옵니다.

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

2. 반복 설정하기

Lottie 애니메이션을 반복해서 재생하기 위해서는 Lottie.asset 위젯의 repeat 속성을 사용해야 합니다. 이 속성을 true로 설정하면 애니메이션이 무한히 반복됩니다.

아래는 예시 코드입니다.

class LottieAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/animations/loading.json',
      repeat: true, // 반복 설정
      width: 200,
      height: 200,
    );
  }
}

위 코드에서 Lottie.asset 위젯의 repeat 속성을 true로 설정하면 해당 Lottie 애니메이션이 무한히 반복하여 재생됩니다. 필요에 따라 애니메이션의 크기를 조정할 수도 있습니다.

3. 결과 확인하기

위의 코드를 작성하고 실행하면 Lottie 애니메이션이 계속해서 반복되어 재생됩니다. 이제 앱에서 Lottie 애니메이션을 원하는대로 반복하여 사용할 수 있습니다.

결론

플러터에서 Lottie 애니메이션을 반복해서 재생하기 위해서는 Lottie.asset 위젯의 repeat 속성을 true로 설정하면 됩니다. 이를 통해 앱에 동적이고 반복적인 애니메이션 요소를 쉽게 추가할 수 있습니다.