플러터는 크로스 플랫폼 앱 개발 프레임워크로, 아름답고 멋진 애니메이션 효과를 구현할 수 있습니다. 이 튜토리얼에서는 플러터의 Lottie 패키지를 사용하여 메인 화면에서 터치 애니메이션 효과를 추가하는 방법을 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 라이브러리로, JSON 형식의 애니메이션 파일을 사용하여 모바일 앱에서 멋진 애니메이션을 구현할 수 있습니다. 이 라이브러리는 기존에 프리앱과 비슷한 애니메이션 효과를 얻기 위해 직접 디자인하기보다는 이미 디자인된 애니메이션을 재사용하고 싶은 경우에 유용합니다.

Lottie 패키지 설치하기

플러터 프로젝트에서 Lottie 패키지를 사용하기 위해서는 pubspec.yaml 파일에 아래의 코드를 추가해야 합니다.

dependencies:
  lottie: ^1.0.0

이후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

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

Lottie 애니메이션 파일은 JSON 형식으로 제공됩니다. LottieFiles 또는 Airbnb의 Lottie 애니메이션 라이브러리에서 원하는 애니메이션 파일을 다운로드할 수 있습니다. 다운로드한 애니메이션 파일을 프로젝트의 assets 폴더에 저장합니다.

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

다운로드한 Lottie 애니메이션 파일을 프로젝트에 추가한 후, 메인 화면에서 해당 애니메이션을 사용하려면 아래의 단계를 따르세요.

1. 애니메이션 파일을 프로젝트의 pubspec.yaml 파일의 assets 섹션에 추가합니다:

assets:
  - assets/animation.json

1. main.dart 파일에서 Lottie.asset 위젯을 사용하여 Lottie 애니메이션을 화면에 추가합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () {
              // 애니메이션을 터치하였을 때의 동작 추가
            },
            child: Lottie.asset(
              'assets/animation.json',
              height: 250,
              width: 250,
            ),
          ),
        ),
      ),
    );
  }
}

1. Lottie.asset 위젯의 onTap 콜백 함수를 사용하여 터치 이벤트에 대한 동작을 추가할 수 있습니다.

결론

이제 플러터 앱의 메인 화면에 Lottie 애니메이션 효과를 추가할 준비가 되었습니다. Lottie 패키지를 설치하고, 애니메이션 파일을 프로젝트에 추가한 다음, 메인 화면에서 Lottie.asset 위젯을 사용하여 애니메이션을 화면에 표시할 수 있습니다. 터치 이벤트에 대한 동작을 추가하여 사용자와 상호작용하는 멋진 애니메이션 효과를 구현해보세요.

참고 자료

• Lottie Files
• Lottie Flutter 패키지
• Flutter 공식 문서