시간대별/주간 날씨 예보 표시

Flutter 날씨 앱에서 현재 날씨만 보여주는 건 부족하다.
앞으로 몇 시간 후, 며칠 후 날씨까지 보여줘야 사용자는 더 똑똑하게 하루를 계획할 수 있다.

이번 글에서는 OpenWeather의 forecast API를 이용해 시간대별 및 주간 예보를 Flutter 앱에 구현해보자.

---

🌤️ forecast API 사용하기

OpenWeatherMap은 두 가지 예보 API를 제공한다.

• 5-day / 3-hour forecast → 3시간 간격으로 5일치 예보
• One Call API → 현재, 분단위, 시간별, 일별 통합 정보 제공 (유료 포함)

이번 글에서는 /forecast 엔드포인트를 사용한다.

https://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}&appid={API_KEY}&units=metric

---

📦 응답 데이터 구조

{
  "list": [
    {
      "dt": 1717585200,
      "main": { "temp": 22.1 },
      "weather": [ { "description": "clear sky", "icon": "01d" } ],
      ...
    },
    ...
  ]
}

list 배열에 3시간 간격 예보가 담겨 있고, 총 40개 정도의 데이터가 있다 (5일 × 8 = 40).

---

🕐 시간대별 날씨 UI 구성

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: forecast.length,
  itemBuilder: (context, index) {
    final item = forecast[index];
    final time = DateFormat.Hm().format(item['dt_txt']);
    return Column(
      children: [
        Text(time),
        Image.network("http://openweathermap.org/img/wn/${item['weather'][0]['icon']}@2x.png"),
        Text("${item['main']['temp']}°C"),
      ],
    );
  },
)

스크롤 가능한 가로형 카드 UI를 만들면 하루의 흐름을 시각적으로 한눈에 볼 수 있다.

---

📅 주간 예보 구현하기

3시간 단위 예보에서 하루 중 가장 많은 시간대(예: 오후 3시)를 기준으로 추려낸다.

Map<String, List<dynamic>> dailyGroups = {};

for (var item in forecast) {
  String date = item['dt_txt'].split(' ')[0];
  dailyGroups.putIfAbsent(date, () => []).add(item);
}

List<Widget> dailyForecast = dailyGroups.entries.map((entry) {
  final day = entry.key;
  final items = entry.value;
  final middle = items[items.length ~/ 2];

  return ListTile(
    leading: Image.network("http://openweathermap.org/img/wn/${middle['weather'][0]['icon']}@2x.png"),
    title: Text("$day"),
    subtitle: Text("${middle['main']['temp']}°C, ${middle['weather'][0]['main']}"),
  );
}).toList();

하루의 평균 혹은 중간 시간대 데이터를 보여주면 주간 예보 형태로 정리할 수 있다.

---

📌 UI/UX 팁

• 요일 단위로 표시 (예: 월, 화, 수)
• 아이콘과 텍스트 색상은 날씨 상태에 따라 변경
• 주간 예보는 ExpansionTile 등으로 세부 예보 열기

---

🧘 마무리하며

하루를 계획할 수 있는 앱, 한 주를 준비하게 해주는 앱 — 그게 바로 예보 기능이 들어간 Flutter 날씨 앱이다.

예보를 UI로 잘 풀어내는 것, 그게 좋은 날씨 앱의 완성이다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 날씨 앱 만들기 여정입니다.