[flutter] 플러터 Lottie와 일기 예보 앱의 날씨 동기화

05 Dec 2023

flutter

1. Lottie 애니메이션 라이브러리 추가

먼저, Lottie 애니메이션을 사용하기 위해 lottie 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음 코드를 추가해주세요:

dependencies:
  lottie: ^1.0.1

이후, 터미널에서 flutter packages get 명령어를 실행하여 종속성을 설치합니다.

2. 날씨 동기화 기능 구현

이제 날씨 동기화 기능을 구현할 차례입니다. 일기 예보 API와 통신하여 현재 날씨 정보를 가져오는 기능을 구현합니다.

import 'package:lottie/lottie.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class WeatherSync {
  static Future<dynamic> getWeatherData() async {
    String url = 'YOUR_WEATHER_API_URL';
    
    try {
      final response = await http.get(url);
      if (response.statusCode == 200) {
        final data = jsonDecode(response.body);
        return data;
      }
    } catch (e) {
      print('Error fetching weather data: $e');
    }
    
    return null;
  }
}

YOUR_WEATHER_API_URL에는 실제 일기 예보 API의 엔드포인트 주소를 넣어줍니다. getWeatherData 메서드는 비동기로 해당 API에 요청을 보내고, 응답을 파싱하여 데이터를 반환합니다.

3. Lottie 애니메이션과 날씨 동기화

이제 날씨 동기화 기능과 Lottie 애니메이션을 연결해보겠습니다.

class WeatherAnimation extends StatefulWidget {
  @override
  _WeatherAnimationState createState() => _WeatherAnimationState();
}

class _WeatherAnimationState extends State<WeatherAnimation> {
  dynamic weatherData;
  
  @override
  void initState() {
    super.initState();
    fetchWeatherData();
  }
  
  void fetchWeatherData() async {
    final data = await WeatherSync.getWeatherData();
    setState(() {
      weatherData = data;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (weatherData != null)
          Lottie.asset(
            'ASSET_FILE_PATH', // 애니메이션 파일 경로
            repeat: true, // 반복 재생 여부
            height: 200, // 애니메이션 높이
            width: 200, // 애니메이션 너비
          ),
        // 날씨 정보 표시 등 추가 UI 구현
      ],
    );
  }
}

WeatherAnimation 위젯은 WeatherSync 클래스를 사용하여 날씨 데이터를 가져오고, Lottie.asset 위젯을 사용하여 애니메이션을 표시합니다. 날씨 데이터가 없으면 애니메이션을 표시하지 않습니다.

마무리

이렇게 플러터를 사용하여 Lottie와 일기 예보 앱의 날씨 동기화 기능을 구현할 수 있습니다. 날씨 동기화와 함께 다른 UI 요소도 추가하여 완성도 높은 앱을 개발할 수 있습니다. 추가로 필요한 기능이나 UI 디자인은 개발 요구에 따라 구현하면 됩니다.

참고 문서: