중급

실생활 앱 (날씨 앱)

외부 API에서 날씨 JSON을 받아 로딩, 성공, 실패 상태를 화면에 나누어 표시하는 앱을 만듭니다.

동작

실생활 앱 (날씨 앱) 실행 화면

도시 이름을 입력하고 날씨 정보를 요청합니다. 요청 중에는 로딩 상태를 보여줍니다. 응답 JSON을 Weather 모델로 바꿔 온도와 상태를 표시합니다.

예제 코드

날씨 앱

날씨 앱 중급
상태 대기
  • Seoul27°C · 맑음

예제 코드 기능별 설명

코드를 나누어 읽기

import

material.dart는 입력창, 버튼, 로딩 표시, ListTile UI를 제공합니다. 실제 API를 붙이면 http 또는 dio import가 추가됩니다.

import 'package:flutter/material.dart';

Weather 모델

API 응답 JSON을 그대로 화면에 쓰지 않고 Weather 모델로 바꿉니다. 중급 단계에서는 외부 데이터를 앱 내부 타입으로 정리하는 과정이 중요합니다.

factory Weather.fromJson(Map<String, dynamic> json) {
  return Weather(city: json['city'], temp: json['temp'], description: json['description']);
}

상태 변수

cityController는 검색할 도시 이름을 읽습니다. weather는 성공 응답, loading은 요청 중 상태, error는 실패 메시지를 표시하기 위한 상태입니다.

final cityController = TextEditingController(text: 'Seoul');
Weather? weather;
bool loading = false;
String error = '';

비동기 요청

fetchWeather는 요청 전 loading을 켜고, 응답 후 Weather 값을 넣습니다. 실제 API에서는 이 자리에 http 또는 Dio 요청이 들어갑니다.

setState(() => loading = true);
await Future.delayed(const Duration(seconds: 1));
setState(() => weather = Weather.fromJson(json));

상태별 UI

API 앱은 성공 화면만 있으면 부족합니다. 로딩, 실패, 성공을 나누어야 네트워크 지연과 오류를 사용자에게 설명할 수 있습니다.

if (loading) const CircularProgressIndicator()
if (error.isNotEmpty) Text(error)
if (weather != null) ListTile(...)