[flutter] Flutter Riverpod에서 날씨 알림 앱 만들기

날씨 알림 앱은 현재의 날씨 정보를 보여주고 사용자에게 알림을 통해 날씨의 변화를 알려주는 앱입니다. 이번 포스트에서는 Flutter와 Riverpod을 사용하여 간단한 날씨 알림 앱을 만드는 방법에 대해 알아보겠습니다.

Riverpod이란?

Riverpod은 상태 관리 라이브러리 중 하나로, Provider 패키지의 개선된 버전입니다. Riverpod을 사용하면 의존성 주입과 상태 관리를 효율적으로 처리할 수 있습니다.

프로젝트 설정

우선 Flutter 프로젝트를 생성하고, riverpod 패키지를 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0+3

의존성을 추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아야 합니다.

OpenWeatherMap API 사용하기

날씨 정보를 얻기 위해 OpenWeatherMap API를 사용하려면 해당 서비스에 가입하고 API 키를 발급받아야 합니다. API 키를 발급받은 후에는 HTTP 패키지를 사용하여 API를 호출할 수 있습니다.

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

final apiKey = 'your_api_key';
final apiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=$apiKey';

final response = await http.get(Uri.parse(apiUrl));
if (response.statusCode == 200) {
  final data = json.decode(response.body);
  final weatherDescription = data['weather'][0]['description'];
  // 날씨 정보를 사용하여 작업 수행
} else {
  throw Exception('Failed to load weather data');
}

Riverpod을 사용한 상태 관리

Riverpod을 사용하여 현재의 날씨 정보를 상태로 관리할 수 있습니다. 상태를 갱신하는 방법은 StateNotifier를 사용하는 것이 일반적입니다.

import 'package:riverpod/riverpod.dart';

class WeatherNotifier extends StateNotifier<String> {
  WeatherNotifier() : super('');

  Future<void> getWeather() async {
    // OpenWeatherMap API를 사용하여 날씨 정보를 가져옴
    state = 'Sunny'; // 실제로는 API 응답에서 얻은 정보로 설정
  }
}

final weatherProvider = StateNotifierProvider<WeatherNotifier, String>((ref) {
  return WeatherNotifier();
});

날씨 알림 화면 구성

마지막으로 Flutter를 사용하여 날씨 알림 화면을 구성합니다. Consumer 위젯을 사용하여 상태 변경을 감지하고, 알림을 표시할 수 있습니다.

Consumer(builder: (context, watch, child) {
  final weather = watch(weatherProvider);
  return Text('Current weather: $weather');
});

마치며

이제 Riverpod을 사용하여 간단한 날씨 알림 앱을 만들어 보았습니다. Riverpod을 사용하면 상태 관리가 간편해지고, 의존성 주입을 효율적으로 관리할 수 있습니다. 앞으로 더 복잡한 기능을 추가하여 실제 앱을 완성해보세요!

참고: