이번 튜토리얼에서는 플러터(Flutter)와 Lottie를 사용하여 타이머 앱의 진행 애니메이션을 표시하는 방법을 알아보겠습니다.

목차

1. Lottie란?
2. 플러터에 Lottie 플러그인 추가하기
3. Lottie 애니메이션 파일 준비하기
4. 플러터에서 Lottie 애니메이션 사용하기

Lottie란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식의 애니메이션 파일을 사용하여 아름답게 디자인된 애니메이션을 표시할 수 있습니다. 플러터에서도 Lottie를 사용하여 다양한 애니메이션을 쉽게 표시할 수 있습니다.

플러터에 Lottie 플러그인 추가하기

먼저, 플러터 프로젝트에 Lottie 플러그인을 추가해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.1

의존성을 추가한 후, flutter packages get 명령어를 실행하여 의존성을 다운로드합니다.

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

Lottie 애니메이션 파일은 JSON 형식으로 제공됩니다. Lottie Files에서 다양한 애니메이션 파일을 다운로드할 수 있습니다. 이번 예제에서는 timer.json 이라는 이름의 애니메이션 파일을 사용하도록 하겠습니다. 해당 파일을 다운로드하고 프로젝트의 assets 폴더에 복사해주세요.

플러터에서 Lottie 애니메이션 사용하기

1. 먼저, pubspec.yaml 파일에 아래의 코드를 추가하여 애니메이션 파일을 로드할 수 있도록 설정해주세요.

flutter:

  assets:
    - assets/timer.json

1. 이제 타이머 진행 애니메이션을 표시할 위젯을 만들어보겠습니다. 다음 코드를 참고하여 TimerAnimation 이라는 위젯을 생성해주세요.

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

class TimerAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      'assets/timer.json',
      height: 200,
      width: 200,
    );
  }
}

1. 이제 타이머 앱의 화면에 TimerAnimation 위젯을 추가해보겠습니다. 예를 들어, TimerScreen 위젯에 다음과 같이 TimerAnimation을 추가해주세요.

import 'package:flutter/material.dart';

class TimerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('타이머 앱'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TimerAnimation(),
          // 타이머 기능 추가
        ],
      ),
    );
  }
}

1. 이제 앱을 실행하면 TimerAnimation 위젯을 통해 타이머 진행 애니메이션을 확인할 수 있습니다.

이렇게 Lottie를 사용하여 플러터 앱에서 타이머 애니메이션을 표시할 수 있습니다. Lottie를 사용하면 다양한 애니메이션을 손쉽게 표현할 수 있으므로, 앱의 사용자 경험을 향상시킬 수 있습니다.

참고: 이 예제는 플러터와 Lottie의 기본 사용법에 대한 예시일 뿐, 실제 타이머 기능은 예제에 포함되어 있지 않습니다.

참고 자료

• Lottie
• Lottie Files