플러터(Flutter)는 다양한 플랫폼에서 동작하는 크로스 플랫폼 앱 개발 프레임워크로, 애니메이션을 포함한 다양한 UI 요소를 구현할 수 있습니다. 이번 포스트에서는 플러터의 화려한 애니메이션 라이브러리인 Lottie를 사용하여 포트폴리오 앱에서 자기 소개 애니메이션을 표시하는 방법에 대해 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식의 애니메이션 파일을 사용하여 다양한 플랫폼에서 애니메이션을 재생할 수 있습니다. 플러터에서는 lottie_flutter 패키지를 이용하여 Lottie 애니메이션을 표시할 수 있습니다.

Lottie 애니메이션 파일 생성하기

먼저, Lottie 애니메이션 파일을 생성해야 합니다. 이를 위해서는 Lottie Files(https://lottiefiles.com/)와 같은 온라인 플랫폼을 사용하거나 Adobe After Effects와 같은 도구를 사용할 수 있습니다. 생성된 애니메이션 파일은 JSON 형식으로 다운로드할 수 있습니다.

프로젝트 설정하기

프로젝트를 생성하고 pubspec.yaml 파일을 열어서 lottie_flutter 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.1

프로젝트를 업데이트하려면 다음 명령을 실행합니다:

$ flutter packages get

Lottie 애니메이션 표시하기

플러터에서 Lottie 애니메이션을 표시하려면 Lottie.asset 위젯을 사용합니다. 먼저, 애니메이션 파일을 assets 폴더에 추가합니다. 그런 다음 애니메이션을 표시할 화면의 위젯에 Lottie.asset을 추가합니다.

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

class IntroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('포트폴리오 앱'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/intro_animation.json',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

위 코드에서 intro_animation.json은 앞서 생성한 Lottie 애니메이션 파일의 경로입니다.

실행하기

애니메이션을 표시할 화면에서 위젯을 생성하고 flutter run 명령을 실행하여 앱을 실행합니다:

$ flutter run

포트폴리오 앱을 실행하면 자기 소개 애니메이션이 표시됩니다.

결론

플러터의 Lottie로 포트폴리오 앱에 화려한 자기 소개 애니메이션을 추가하는 방법을 알아보았습니다. Lottie를 사용하면 다양한 애니메이션을 손쉽게 통합할 수 있으며, 플러터의 다른 UI 요소와 함께 활용할 수 있습니다.