[flutter] 플러터 Lottie와 타이머 기능의 연결

05 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 Lottie 애니메이션과 타이머 기능을 연결하는 방법에 대해 알아보겠습니다.

1. Lottie 애니메이션 설치

Lottie는 네이티브 애니메이션 파일을 사용하여 다양한 플랫폼에서 애니메이션을 실행하는 라이브러리입니다. Flutter에서 Lottie를 사용하기 위해서는 다음 패키지를 설치해야 합니다.

dependencies:
  lottie: ^1.0.1

위의 의존성을 pubspec.yaml 파일에 추가한 후, packages get 명령어를 실행하여 패키지를 다운로드합니다.

2. Lottie 파일 추가

Lottie 파일은 JSON 형식으로 되어 있습니다. Lottie 파일을 얻을 수 있는 여러 사이트가 있으니 원하는 애니메이션 파일을 다운로드합니다. 다운로드한 Lottie 파일을 Flutter 프로젝트의 assets 폴더에 추가합니다.

3. Lottie 애니메이션 로드

Lottie 애니메이션 파일을 로드하기 위해 Lottie.asset 위젯을 사용합니다. 다음 예제 코드를 참고하세요.

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

class LottieAnimation extends StatefulWidget {
  @override
  _LottieAnimationState createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation> {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/animation.json', // Lottie 파일 경로
      repeat: true,
      reverse: false,
      animate: true,
    );
  }
}

위 코드에서는 assets/animation.json 경로의 Lottie 애니메이션을 로드하고, 반복해서 실행하며, 역방향으로 실행하지는 않습니다.

4. 타이머 기능 추가

타이머 기능을 추가하기 위해 Timer 클래스를 사용할 수 있습니다. 다음 예제 코드를 참고하세요.

import 'dart:async';

class TimerWidget extends StatefulWidget {
  @override
  _TimerWidgetState createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  int _seconds = 0;
  Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        _seconds++;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text('$_seconds seconds');
  }
}

위의 코드에서는 매 초마다 _seconds 변수를 증가시키는 타이머를 생성하고, 타이머가 종료될 때 _timer.cancel()을 호출하여 타이머를 중지합니다.

5. Lottie 애니메이션과 타이머 기능 연결

Lottie 애니메이션과 타이머 기능을 연결하기 위해서는 TimerWidget를 LottieAnimation 위젯에 추가하고, Lottie 애니메이션의 특정 프레임을 재생하도록 설정해야 합니다. 다음 예제 코드를 참고하세요.

class LottieAnimationWithTimer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        LottieAnimation(),
        TimerWidget(),
      ],
    );
  }
}

위의 코드에서는 Stack 위젯을 사용하여 Lottie 애니메이션과 타이머 기능을 겹쳐서 표시합니다.

이제 Lottie 애니메이션과 타이머 기능이 연결되어 함께 동작하는 Flutter 앱을 만들 수 있습니다.

결론

이번 포스트에서는 Flutter 앱에서 Lottie 애니메이션과 타이머 기능을 연결하는 방법에 대해 알아보았습니다. Lottie를 사용하면 앱에 멋진 애니메이션을 쉽게 추가할 수 있으며, 타이머를 사용하여 애니메이션과 함께 동적인 기능을 구현할 수 있습니다. 추가로 필요한 기능이 있다면 해당 문서를 참고해보세요.

관련 문서: