플러터(Flutter)는 UI 개발을 위한 오픈소스 프레임워크입니다. Lottie는 Airbnb에서 만든 애니메이션 플레이어로, 플러터와 함께 사용할 수 있습니다. 이 예제에서는 플러터에서 Lottie를 사용하는 방법을 알아보겠습니다.

Lottie란?

Lottie는 애프터이펙트(After Effects)로 만든 애니메이션을 앱에 쉽게 통합할 수 있게 해주는 라이브러리입니다. JSON 파일 형식으로 애니메이션을 저장하고, Lottie는 이 파일을 해석하여 애니메이션을 앱에서 재생합니다.

Lottie 사용하기

1. lottie_flutter 패키지를 프로젝트에 추가합니다. 프로젝트의 pubspec.yaml 파일에 아래와 같은 의존성을 추가합니다:

dependencies:
  lottie: ^1.0.0

1. 패키지를 가져와서 사용합니다. 예를 들어, 다음과 같이 assets 폴더에 저장된 JSON 파일을 로드하여 재생할 수 있습니다:

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

class LottieExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lottie Example'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/animation.json',
          repeat: true,
          reverse: true,
          animate: true,
        ),
      ),
    );
  }
}

위의 코드에서 Lottie.asset 위젯은 assets/animation.json 파일을 로드하여 애니메이션을 표시합니다. repeat은 애니메이션을 반복하여 재생할지, reverse는 역방향으로 재생할지, animate는 애니메이션을 자동으로 시작할지 여부를 설정합니다.

1. 위젯을 화면에 표시합니다. 예를 들어, main.dart 파일에서 LottieExample를 실행하여 애니메이션을 화면에 표시할 수 있습니다:

import 'package:flutter/material.dart';

import 'lottie_example.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lottie Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LottieExample(),
    );
  }
}

위의 코드에서 LottieExample 위젯은 home으로 설정되어 앱의 첫 번째 화면에 표시됩니다.

결론

이 예제에서는 플러터에서 Lottie를 사용하는 방법을 살펴보았습니다. Lottie를 사용하면 애프터이펙트로 만든 멋진 애니메이션을 플러터 앱에 통합할 수 있습니다. 자세한 내용은 Lottie for Flutter 패키지 문서를 참조하세요.