[flutter] 플러터 Lottie로 프로필 이미지에 애니메이션 추가하기

05 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 사용자 인터페이스(UI) 프레임워크로, 여러 가지 플랫폼에서 동작하는 애플리케이션 개발을 위해 사용됩니다. 이번에는 플러터의 Lottie 패키지를 사용하여 프로필 이미지에 애니메이션을 추가하는 방법을 알아보겠습니다.

1. Lottie 패키지 추가하기

플러터에서 Lottie 애니메이션을 사용하기 위해서는 pubspec.yaml 파일에 Lottie 패키지를 추가해야 합니다. 아래의 코드를 pubspec.yaml 파일에 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0

이후, 터미널에서 flutter pub get 명령을 실행하여 Lottie 패키지를 다운로드 받습니다.

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

Lottie 애니메이션을 사용하기 위해서는 JSON 형식의 애니메이션 파일이 필요합니다. Lottie 사이트(https://lottiefiles.com/)에서 애니메이션 파일을 다운로드 받을 수 있습니다. 다운로드 후, 프로젝트의 assets 폴더에 애니메이션 파일을 복사해주세요.

3. 프로젝트에 Lottie 애니메이션 추가하기

Lottie 애니메이션을 플러터 프로젝트에 추가하기 위해서는 Lottie.asset 위젯을 사용합니다. 아래의 예시 코드를 참고하여 프로필 이미지에 Lottie 애니메이션을 추가해보세요.

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

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('프로필 페이지'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/profile_animation.json',
              width: 200,
              height: 200,
            ),
            SizedBox(height: 20),
            Text(
              '프로필 정보',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 Lottie.asset 위젯을 Column 위젯 내에 포함시킵니다. Lottie.asset 위젯의 width 및 height 속성을 조정하여 애니메이션의 크기를 설정할 수 있습니다. 애니메이션 파일의 경로는 assets/profile_animation.json로 지정되어 있으므로, 프로젝트의 assets 폴더에 애니메이션 파일이 위치해야 합니다.

4. 실행 및 확인하기

프로젝트에서 정상적으로 Lottie 애니메이션을 사용하기 위해서는 애니메이션 파일을 포함한 애플리케이션을 빌드해야 합니다. 터미널에서 flutter run 명령을 실행하여 애플리케이션을 빌드하고 실행하세요. 그러면 프로필 페이지에서 애니메이션을 확인할 수 있습니다.

플러터의 Lottie 패키지를 사용하여 프로필 이미지에 애니메이션을 추가하는 방법을 알아보았습니다. Lottie 패키지를 이용하면 쉽게 다양한 애니메이션을 표현할 수 있으므로, 애니메이션 효과를 추가하고 싶은 경우에 유용하게 사용할 수 있습니다.

참고: Lottie
참고: Lottie Files