플러터(Flutter)는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 다양한 기능과 라이브러리를 제공합니다. 이번 글에서는 Lottie를 사용하여 날씨 앱의 기온을 표시하는 애니메이션을 만들어보겠습니다.
Lottie란?
Lottie는 Airbnb에서 개발한 오픈 소스 라이브러리로, Adobe After Effects를 통해 만든 모션 그래픽을 표시할 수 있습니다. Lottie를 통해 복잡한 애니메이션을 쉽게 구현할 수 있어 개발자들 사이에서 많은 인기를 받고 있습니다.
준비 작업
먼저, lottie_flutter 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 추가합니다:
dependencies:
flutter:
sdk: flutter
lottie_flutter: ^4.1.0
커맨드 라인에서 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.
기온 애니메이션 만들기
1. 날씨 아이콘 가져오기
먼저, 현재 날씨에 따른 아이콘을 가져와야 합니다. 이 부분은 개별적인 API 호출이나 따로 구현되어 있는 경우에 따라 달라질 수 있습니다. 가져온 날씨 아이콘을 이용하여 Lottie 애니메이션을 생성합니다.
2. Lottie 파일 준비하기
After Effects를 사용하여 날씨의 기온에 따른 Lottie 애니메이션 파일을 제작합니다. 이 애니메이션은 기온의 범위에 따라 적절한 애니메이션이 표시되도록 설정합니다. 범위는 예를 들어 -10°C ~ 10°C, 10°C ~ 20°C, 20°C 이상으로 나눌 수 있습니다.
3. Lottie 파일을 프로젝트에 추가하기
프로젝트의 assets 폴더에 Lottie 애니메이션 파일을 추가합니다. 이때, pubspec.yaml 파일에 아래와 같이 추가하여 파일을 참조할 수 있도록 설정합니다:
flutter:
assets:
- assets/lottie/animations.json
4. 플러터 코드 작성하기
위의 작업이 완료되면, 이제 플러터 코드로 애니메이션을 표시하는 작업을 진행합니다. 아래는 간단한 예시 코드입니다:
import 'package:flutter/material.dart';
import 'package:lottie_flutter/lottie_flutter.dart';
class WeatherAnimation extends StatelessWidget {
final int temperature;
WeatherAnimation({required this.temperature});
@override
Widget build(BuildContext context) {
String animationPath = _getAnimationPath();
return Container(
child: Lottie.asset(
animationPath,
height: 200,
width: 200,
fit: BoxFit.cover,
),
);
}
String _getAnimationPath() {
if (temperature < 10) {
return 'assets/lottie/cold.json';
} else if (temperature < 20) {
return 'assets/lottie/cool.json';
} else {
return 'assets/lottie/hot.json';
}
}
}
WeatherAnimation 클래스는 기온에 따라 애니메이션을 표시하는 위젯입니다. _getAnimationPath 메소드에서 기온에 따라 알맞은 애니메이션 파일 경로를 반환합니다.
5. 앱에 표시하기
실제로 앱에서 이 애니메이션을 사용하려면, 다른 위젯 내에서 WeatherAnimation 위젯을 사용하면 됩니다. 예를 들어:
class WeatherApp extends StatelessWidget {
final int currentTemperature;
WeatherApp({required this.currentTemperature});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Weather App'),
),
body: Center(
child: WeatherAnimation(temperature: currentTemperature),
),
),
);
}
}
WeatherApp 클래스는 WeatherAnimation 위젯을 앱의 중앙에 표시합니다. currentTemperature 변수는 현재 기온을 나타냅니다.
마치며
이렇게 플러터와 Lottie를 함께 사용하여 날씨 앱의 기온 애니메이션을 표시하는 방법을 알아보았습니다. Lottie를 사용하면 애니메이션 효과를 간단하게 구현할 수 있어 유용합니다. 추가적으로 다양한 애니메이션 효과를 적용하여 날씨 앱을 더욱 흥미롭게 만들 수도 있습니다.
참고 자료: