📝 Riverpod Consumer Widgets 개념 정리

✏️ Consumer Widgets란?

Provider가 제공하는 상태를 “구독(consume)”해서 UI로 그리는 위젯
Provider ↔ UI를 연결하는 접점 역할을 하는 위젯

✏️ 왜 Consumer Widget이 필요할까?

Flutter 기본 위젯의 한계

일반 StatelessWidget / StatefulWidget
Provider 상태를 직접 감지할 수 없음
상태 변경 시 자동 리빌드 ❌

그래서 Riverpod가 제공하는 Consumer 계열 위젯이 필요한 것

✏️ ConsumerWidget / Consumer / ConsumerStatefulWidget 차이

1️⃣ ConsumerWidget

개념

StatelessWidget + Consumer 합쳐진 형태
가장 많이 쓰는 기본형

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(counterProvider);
    return Text('$state');
  }
}

특징

상태 구독 가능 (ref.watch)
내부에 State 없음
코드 짧고 가독성 좋음

언제 쓰나?

UI가 외부 상태(provider) 에만 의존할 때
버튼 클릭, 아이콘 토글, 리스트 아이템 등

장점 / 단점

✅ 단순, 깔끔
❌ initState, dispose 사용 불가

2️⃣ Consumer

개념

일반 위젯 안에서 일부만 상태 구독할 때 사용
빌드 범위를 최소화하는 용도

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('고정 UI'),
        Consumer(
          builder: (context, ref, child) {
            final state = ref.watch(counterProvider);
            return Text('$state');
          },
        ),
      ],
    );
  }
}

특징

부모는 StatelessWidget 유지
Consumer 내부만 리빌드

언제 쓰나?

UI 일부만 상태에 반응해야 할 때
성능 최적화 필요할 때

장점 / 단점

✅ 불필요한 리빌드 방지
❌ 코드가 중첩되면 가독성 떨어짐

3️⃣ ConsumerStatefulWidget

개념

StatefulWidget + Consumer
라이프사이클 + provider 둘 다 필요할 때

class MyWidget extends ConsumerStatefulWidget {
  @override
  ConsumerState<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  @override
  void initState() {
    super.initState();
    ref.read(counterProvider.notifier).init();
  }

  @override
  Widget build(BuildContext context) {
    final state = ref.watch(counterProvider);
    return Text('$state');
  }
}

특징

initState, dispose 사용 가능
ref를 State 안에서 직접 사용

언제 쓰나?

화면 진입 시 API 호출
AnimationController
ScrollController
Timer, Stream 관리

장점 / 단점

✅ 제어력 최고
❌ 구조가 가장 무거움

---

📝 Open-Meteo API

Open-Meteo는 무료(비상업적)로 전 세계 날씨 데이터를 JSON으로 제공하는 REST API

• API 키 없이도 이용 가능 ✔
• 글로벌 커버리지 & 고해상도 모델 기반 예보
• HTTP 요청 → JSON 응답 구조로 간단하게 사용 가능
• 기상청/국가 모델 데이터를 조합하여 가장 적합한 예보 제공

✏️ 제공하는 주요 API 종류

API 이름	설명
Weather Forecast API	실시간 + 예보(최대 16일) 날씨 데이터 (Open Meteo)
Historical Weather API	과거 날씨(최대 1940년대~현재) (Open Meteo)
Climate API	장기 기후 데이터/모델 기반 통계 (Open Meteo)
Marine Weather API	해양 기상/파도/조위 데이터 (Open Meteo)
ECMWF API	유럽중기예보센터 모델 기반 예보 (Open Meteo)
MET Norway API	북유럽 지역 1km급 단기 예보 (Open Meteo)

✏️ Weather Forecast API

기본 엔드포인트

GET https://api.open-meteo.com/v1/forecast

모든 데이터는 Query Parameter로 전달함

필수 파라미터

파라미터	설명
latitude	위도
longitude	경도

?latitude=37.57&longitude=126.98

좌표계는 WGS84 (일반적인 GPS 좌표)

주요 데이터 타입

Weather Forecast API는 크게 3종류 데이터를 제공

1. Current (현재 날씨)

현재 시각 기준의 실시간 날씨
current= 파라미터 사용

&current=temperature_2m,weathercode,wind_speed_10m

변수	설명
temperature_2m	현재 기온 (2m 높이)
weathercode	날씨 상태 코드
wind_speed_10m	풍속
is_day	낮/밤 여부 (1 / 0)

2. Hourly (시간별 예보)

보통 48~72시간 이상
1시간 단위 데이터

&hourly=temperature_2m,precipitation_probability,wind_speed_10m

변수	설명
temperature_2m	기온
relative_humidity_2m	습도
apparent_temperature	체감 온도
precipitation	강수량
precipitation_probability	강수 확률
weathercode	날씨 코드
cloudcover	구름량
wind_speed_10m	풍속
wind_direction_10m	풍향

3. Daily (일별 예보)

최대 16일
하루 요약 데이터 (최고/최저 등)

&daily=temperature_2m_max,temperature_2m_min,weathercode

변수	설명
temperature_2m_max	최고 기온
temperature_2m_min	최저 기온
precipitation_sum	일 강수량
precipitation_probability_max	최대 강수 확률
sunrise / sunset	일출 / 일몰
uv_index_max	최대 자외선 지수
weathercode	일별 날씨 상태

Weather Code

코드	의미
0	맑음
1~3	대체로 맑음 / 구름
45, 48	안개
51~57	이슬비
61~67	비
71~77	눈
80~82	소나기
95	천둥번개

✏️ 직접 사용해보자

코드 전체 구조

static const String _baseUrl = 'https://api.open-meteo.com/v1/forecast';

final uri = Uri.parse(
  '$_baseUrl?latitude=$latitude&longitude=$longitude'
  '&timezone=auto&current=temperature_2m,is_day,wind_speed_10m,weather_code',
);

_baseUrl

static const String _baseUrl = 'https://api.open-meteo.com/v1/forecast';

Open-Meteo Weather Forecast API 엔드포인트
모든 날씨 예보 요청은 이 URL에서 시작함
“어디에 요청할지” 정의

latitude=$latitude

요청할 위치의 위도
북위: 양수 / 남위: 음수
latitude = 37.57 → 서울 근처
📌 날씨를 조회할 세로 위치

longitude=$longitude

요청할 위치의 경도
동경: 양수 / 서경: 음수
longitude = 126.98 → 서울 근처
📌 날씨를 조회할 가로 위치

timezone=auto

&timezone=auto

해당 좌표에 맞는 현지 시간대 자동 적용
예: 한국 → Asia/Seoul

왜 중요할까?

날짜 / 시간 계산을 서버가 자동으로 맞춰줌
current.time, daily.time 등이 로컬 시간 기준
앱에서 시간 변환 안 해도 돼서 매우 편함

current=...

&current=temperature_2m,is_day,wind_speed_10m,weather_code

현재 시각의 날씨 데이터만 요청
Open-Meteo는 current, hourly, daily를 명시하지 않으면 안 줌

temperature_2m

지면 위 2m 기준 기온
우리가 일반적으로 말하는 “현재 기온”

• 단위: °C (기본값)

is_day

현재 시각이 낮인지 밤인지

값	의미
1	낮
0	밤

• 다크모드 / 낮밤 아이콘 전환에 자주 사용

wind_speed_10m

지면 위 10m 기준 풍속
체감 온도, 바람 UI에 활용

• 단위: km/h (기본)

weather_code

현재 날씨 상태를 숫자로 표현

String _convertWeatherCode(num code) {
  final int c = code.toInt();
  if (c == 0) return '맑음';
  if ([1, 2, 3].contains(c)) return '부분 흐림 또는 구름 많음';
  if ([45, 48].contains(c)) return '안개';
  if ([51, 53, 55].contains(c)) return '이슬비';
  if ([56, 57].contains(c)) return '언 이슬비';
  if ([61, 63, 65].contains(c)) return '비';
  if ([66, 67].contains(c)) return '언 비';
  if ([71, 73, 75].contains(c)) return '눈';
  if (c == 77) return '눈송이';
  if ([80, 81, 82].contains(c)) return '소나기';
  if ([85, 86].contains(c)) return '눈 소나기';
  if (c == 95) return '천둥 번개';
  if ([96, 99].contains(c)) return '번개와 우박';
  return '알 수 없음';
}

---

공부 소감

과제 진행하면서 개인적으로 부족한 부분과 새로운 api를 공부했다. 이제 과제 마무리하고 남은 강의 들어봐야겠다!