날씨 앱에 동적이고 아름다운 애니메이션을 추가해보세요! 이번에는 플러터 프레임워크의 Lottie 패키지를 사용하여 날씨 앱의 배경에 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 모바일 애니메이션 라이브러리입니다. Lottie는 After Effects, Adobe Illustrator 등의 디자인 툴에서 만든 애니메이션을 JSON 형식으로 내보내고, 해당 애니메이션을 앱에서 쉽게 사용할 수 있도록 제공합니다.

1. Lottie 패키지 추가하기

먼저, pubspec.yaml 파일에 Lottie 패키지를 추가해야 합니다. dependencies 섹션에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

패키지를 추가한 후에는 터미널에서 flutter packages get 명령어를 실행하여 패키지를 가져옵니다.

2. Lottie 애니메이션 파일 가져오기

Lottie 애니메이션을 사용하기 위해서는 먼저 해당 애니메이션 파일을 가져와야 합니다. lottiefiles.com 등의 웹사이트에서 원하는 Lottie 애니메이션 파일을 다운로드합니다.

3. Lottie 애니메이션 적용하기

다운로드한 Lottie 애니메이션 파일을 프로젝트 폴더의 assets 폴더에 복사합니다. (assets 폴더가 없다면 새로 생성해주세요)

이제, 애니메이션을 사용할 스크린(예: 날씨 앱의 배경 스크린)에 다음과 같이 코드를 작성합니다:

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

class WeatherScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Lottie.asset(
            'assets/weather_animation.json',
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          // 여기에 다른 위젯들을 추가하여 날씨 앱의 UI를 구성합니다
        ],
      ),
    );
  }
}

• Lottie.asset() 위젯을 사용하여 애니메이션 파일을 로드합니다. assets/weather_animation.json 은 본인이 추가한 애니메이션 파일의 경로로 변경해야 합니다.
• width와 fit 속성을 사용하여 애니메이션의 크기와 배치를 조절할 수 있습니다.
• Stack 위젯을 사용하여 애니메이션과 다른 위젯들이 겹칠 수 있도록 구성합니다.

4. 플러터 앱에서 Lottie 애니메이션 실행하기

위의 코드를 앱 실행 코드에 추가하여 Lottie 애니메이션을 실행해보세요:

import 'package:flutter/material.dart';

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

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

마무리

이제 플러터 Lottie를 사용하여 날씨 앱에 동적인 애니메이션 효과를 추가할 준비가 되었습니다. Lottie는 다양한 종류의 애니메이션을 지원하므로, 앱의 디자인을 보다 풍부하고 생동감 있게 만들 수 있습니다.

더 많은 Lottie 사용 예제와 기능에 대한 자세한 내용은 Lottie GitHub 저장소와 Lottie 문서를 참고해주세요.