즐겨찾는 도시 날씨 추가 및 리스트 보기

여러 도시의 날씨를 확인하고 싶은 사용자를 위해 즐겨찾기 기능은 필수다.

이번 글에서는 Flutter 앱에서 여러 도시를 저장하고, 각 도시의 날씨 정보를 리스트 형태로 나열해주는 UI를 만들어본다.

---

📦 도시 리스트 저장 구조 설계

List<String> favoriteCities = ['Seoul', 'Tokyo', 'London'];

간단한 리스트로 도시 이름을 저장하고, SharedPreferences 등을 통해 로컬 저장도 가능하게 만든다.

---

➕ 도시 추가 UI 만들기

TextEditingController _cityController = TextEditingController();

TextField(
  controller: _cityController,
  decoration: InputDecoration(
    labelText: "도시 이름 입력",
    suffixIcon: IconButton(
      icon: Icon(Icons.add),
      onPressed: () {
        setState(() {
          favoriteCities.add(_cityController.text);
        });
      },
    ),
  ),
)

도시 이름을 입력하고 리스트에 추가하면 즐겨찾기에 반영된다.

---

🌐 각 도시 날씨 데이터 요청

Future<Map<String, dynamic>> fetchCityWeather(String city) async {
  final apiKey = 'YOUR_API_KEY';
  final url =
    'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric';

  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('날씨 정보 불러오기 실패');
  }
}

각 도시별로 FutureBuilder를 통해 날씨를 비동기로 받아온다.

---

📋 리스트 UI 구성

ListView.builder(
  itemCount: favoriteCities.length,
  itemBuilder: (context, index) {
    final city = favoriteCities[index];
    return FutureBuilder(
      future: fetchCityWeather(city),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return ListTile(title: Text(city));
        final data = snapshot.data!;
        return ListTile(
          leading: Image.network(
            "http://openweathermap.org/img/wn/${data['weather'][0]['icon']}@2x.png",
            width: 40,
          ),
          title: Text(data['name']),
          subtitle: Text("${data['main']['temp']}°C, ${data['weather'][0]['main']}"),
          trailing: IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {
              setState(() {
                favoriteCities.removeAt(index);
              });
            },
          ),
        );
      },
    );
  },
)

각 도시의 날씨 정보를 ListTile 형태로 예쁘게 나열할 수 있다.

---

💡 UX 향상 팁

• 최근 검색 도시 자동 제안
• 도시별 고유 테마 컬러 적용
• 리스트 정렬 (온도순, 이름순 등)

---

🧘 마무리하며

Flutter 날씨 앱은 이제 단순히 내 위치를 넘어서 내가 관심 있는 도시들까지 연결할 수 있다.

전 세계 어디에 있어도, 한눈에 확인할 수 있는 날씨 리스트. 이제 당신의 앱이 개인 맞춤형 날씨 매니저가 된다.

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