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

14 Dec 2023

flutter

이번 포스트에서는 Flutter 프레임워크와 Riverpod 상태 관리 라이브러리를 사용하여 간단한 날씨 앱을 만드는 방법에 대해 알아보겠습니다.

Riverpod이란?

Riverpod은 Flutter 애플리케이션의 상태 관리를 단순화하기 위한 라이브러리입니다. Provider 패턴을 기반으로 하며, 변경 가능한 상태를 추적하고 사용자 인터페이스를 업데이트하는 데 유용합니다.

날씨 앱 예제

이 예제에서는 OpenWeatherMap API를 사용하여 현재 위치의 날씨 정보를 가져옵니다. Riverpod을 사용하여 API 호출 및 상태 관리를 수행하고, UI를 업데이트하는 데 활용할 것입니다.

필수 패키지

먼저, flutter_riverpod 및 HTTP 요청을 보내는 데 사용되는 http 패키지를 추가해야 합니다.

dependencies:
  flutter_riverpod: ^1.0.3
  http: ^0.14.0

Riverpod Provider 생성

다음으로, OpenWeatherMap API를 호출하고 응답을 관리하기 위한 Riverpod Provider를 생성합니다.

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

final weatherProvider = FutureProvider((ref) async {
  final response = await http.get(Uri.parse('API 요청 URL'));
  // 여기서 응답을 파싱하고 필요한 데이터를 반환합니다.
});

UI 구성

마지막으로, UI를 구성하여 Provider에서 가져온 데이터를 화면에 표시합니다.

final weatherProvider = FutureProvider((ref) async {
  // API 요청 및 응답 처리
});

class WeatherApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final weatherAsyncValue = watch(weatherProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('날씨 앱'),
      ),
      body: Center(
        child: weatherAsyncValue.when(
          loading: () => CircularProgressIndicator(),
          error: (error, stackTrace) => Text('오류가 발생했습니다'),
          data: (weather) => Text('현재 온도: ${weather.temperature}도'),
        ),
      ),
    );
  }
}

마치며

이제 Riverpod을 사용하여 간단한 날씨 앱을 만드는 방법에 대해 알아보았습니다. Flutter와 Riverpod을 함께 사용하면 복잡한 상태 관리를 간편하게 처리할 수 있으며, API 호출 및 UI 업데이트를 원활하게 수행할 수 있습니다.

더 많은 자세한 내용은 Riverpod 공식 문서에서 확인할 수 있습니다.