[flutter] 플러터 Lottie로 타이머 앱의 시간 경과 애니메이션 표시하기

05 Dec 2023

flutter

플러터(Flutter)는 모바일 앱 개발을 위한 프레임워크로, 다양한 기능을 구현할 수 있습니다. 이번 글에서는 플러터의 Lottie 패키지를 사용하여 타이머 앱의 시간 경과 애니메이션을 표시하는 방법에 대해 알아보겠습니다.

1. Lottie 패키지 설치하기

먼저, 플러터 프로젝트에 Lottie 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 코드를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0

그리고 pubspec.yaml 파일이 위치한 디렉토리에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.

2. Lottie 애니메이션 파일 준비하기

Lottie 패키지는 애니메이션을 JSON 형식으로 표현한 파일을 사용합니다. Lottie 파일을 찾을 수 있는 여러 사이트가 있으며, 원하는 애니메이션 파일을 다운로드 받아 프로젝트에 추가해야 합니다.

다운로드 받은 Lottie 파일을 assets 폴더에 추가해주세요. 만약 assets 폴더가 없다면 프로젝트 루트 디렉토리에 폴더를 생성한 후 파일을 추가하세요. 이후, pubspec.yaml 파일에 다음과 같은 코드를 추가하여 Lottie 파일을 프로젝트에 포함시켜주세요:

flutter:
  assets:
    - assets/lottie_file.json

3. 애니메이션 위젯 생성하기

이제 Lottie 패키지를 사용하여 시간 경과 애니메이션을 표시하기 위한 위젯을 생성해봅시다. 다음과 같은 코드를 참고해주세요:

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

class TimerAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Lottie.asset('assets/lottie_file.json'),
      // 애니메이션 파일의 경로를 설정해주세요
    );
  }
}

위의 코드에서 TimerAnimation 클래스는 StatelessWidget을 상속받고 있으며, Lottie 패키지의 Lottie.asset 메소드를 사용하여 애니메이션 파일의 경로를 설정하고 있습니다.

4. 타이머와 애니메이션 통합하기

마지막으로, 생성한 애니메이션 위젯을 타이머 앱과 통합해봅시다. 예를 들어, 10초 동안의 타이머를 구현하고 애니메이션을 표시하는 코드는 다음과 같습니다:

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

class TimerPage extends StatefulWidget {
  @override
  _TimerPageState createState() => _TimerPageState();
}

class _TimerPageState extends State<TimerPage> {
  int _seconds = 10;

  void _startTimer() {
    setState(() {
      _seconds = 10;
    });
    Future.delayed(Duration(seconds: 10), () {
      setState(() {
        _seconds = 0;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '$_seconds',
              style: TextStyle(fontSize: 48),
            ),
            SizedBox(height: 20),
            if (_seconds > 0) TimerAnimation(),
          ],
        ),
      ),
    );
  }
}

class TimerAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Lottie.asset('assets/lottie_file.json'),
    );
  }
}

위의 코드에서는 TimerPage 클래스에서 10초 동안의 타이머를 구현하고 있습니다. TimerAnimation 위젯은 _seconds 값이 0보다 큰 경우에만 표시되며, 애니메이션 파일을 표시하고 있습니다.

이제 앱을 실행해보면 타이머에 따라 시간 경과 애니메이션이 표시되는 것을 확인할 수 있습니다.

참고 자료

Lottie 패키지