[flutter] 플러터 Lottie로 인터뷰 어플리케이션의 프로그레스바 애니메이션 구현하기

05 Dec 2023

flutter

본 게시물에서는 Flutter 앱에서 Lottie를 사용하여 인터뷰 어플리케이션의 프로그레스바 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

1. Lottie란?

Lottie는 Airbnb에서 개발한 오픈 소스 라이브러리로, After Effects 애니메이션을 JSON 형식으로 변환하여 모바일 앱에 적용할 수 있는 기능을 제공합니다. Flutter 앱에서 Lottie를 사용하면 멋진 애니메이션을 손쉽게 구현할 수 있습니다.

2. 프로젝트 설정

먼저, Flutter 프로젝트에 Lottie를 사용하기 위해 lottie 패키지를 pubspec.yaml 파일에 추가해야 합니다. 아래의 코드를 dependencies 섹션에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.1

dependencies 섹션에 추가한 뒤, 패키지를 다운로드하려면 터미널에서 flutter packages get 명령을 실행해야 합니다.

3. Lottie 애니메이션 파일 준비

Lottie를 사용하기 전에 애니메이션 파일을 준비해야 합니다. Lottie 파일은 After Effects로 생성할 수 있으며, .json 형식으로 내보낼 수 있습니다. 준비된 Lottie 파일을 프로젝트의 assets 폴더에 추가해주세요.

4. Lottie 애니메이션 구현하기

이제 Lottie 애니메이션을 구현하는 방법을 알아보겠습니다. 먼저, 다음과 같이 Lottie.asset() 위젯을 사용하여 애니메이션을 표시할 수 있습니다.

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

class InterviewProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Lottie.asset(
        'assets/animation.json',
        width: 200,
        height: 200,
        repeat: true,
        reverse: false,
        animate: true,
      ),
    );
  }
}

이 코드는 프로젝트의 assets/animation.json 파일에서 Lottie 애니메이션을 로드하고, 가로 200px, 세로 200px 크기의 애니메이션을 표시합니다. repeat 속성을 true로 설정하면 애니메이션이 반복되고, reverse를 false로 설정하면 애니메이션이 정방향으로 재생됩니다.

5. 화면에 Lottie 애니메이션 추가하기

마지막으로, Lottie 애니메이션을 화면에 추가하는 방법을 알아보겠습니다. 아래의 코드는 Lottie 애니메이션을 InterviewProgressBar 위젯으로 사용하여 화면에 표시하는 예시입니다.

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Interview App'),
      ),
      body: Center(
        child: InterviewProgressBar(),
      ),
    ),
  ));
}

이 코드는 InterviewProgressBar 위젯을 화면 중앙에 배치하여 Lottie 애니메이션을 표시합니다.

참고 자료

위의 내용을 따라하면 플러터 앱에서 Lottie를 사용하여 인터뷰 어플리케이션의 프로그레스바 애니메이션을 손쉽게 구현할 수 있습니다. Lottie를 통해 앱에 멋진 애니메이션을 추가하여 사용자 경험을 높일 수 있습니다.