위젯처럼 홈 화면에서 현재 날씨 보여주기

모든 사용자가 앱을 직접 켜는 건 귀찮다.
홈 화면에서 바로 현재 날씨를 확인할 수 있다면 얼마나 편할까?

이번 글에서는 Flutter로 날씨 앱을 만들 때, 위젯처럼 보이는 요약 날씨 UI를 앱 첫 화면 혹은 특정 영역에 표시하는 방법을 정리해본다.

---

📌 목표 UI 구성

아래와 같은 구성으로 간단한 날씨 요약 카드를 만들자:

• 현재 위치 또는 선택된 도시
• 현재 온도 + 날씨 상태
• 작은 아이콘 또는 애니메이션

┌────────────────────────────┐  
│  🌤  Seoul                 │  
│  24°C  |  Clear Sky        │  
└────────────────────────────┘

---

🌐 날씨 데이터 불러오기

Future<Map<String, dynamic>> fetchWeather(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('날씨 정보를 가져오지 못했습니다.');
  }
}

앱 첫 화면 또는 홈 탭 진입 시 바로 이 데이터를 요청하면 된다.

---

📱 위젯 스타일 카드 UI 만들기

FutureBuilder(
  future: fetchWeather('Seoul'),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    final data = snapshot.data!;
    return Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      elevation: 4,
      color: Colors.blue.shade50,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Image.network(
              "http://openweathermap.org/img/wn/${data['weather'][0]['icon']}@2x.png",
              width: 48,
            ),
            SizedBox(width: 16),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("${data['name']}", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                Text("${data['main']['temp']}°C | ${data['weather'][0]['main']}",
                  style: TextStyle(fontSize: 16),
                ),
              ],
            )
          ],
        ),
      ),
    );
  },
)

간결하고 깔끔한 디자인으로 홈 화면 어디에 두어도 위화감 없이 자연스럽다.

---

💡 추가 개선 아이디어

• 카드 클릭 시 → 전체 날씨 상세 페이지로 이동
• 다크모드 대응: 카드 색상 조건 분기
• 날씨 상태에 따라 아이콘 컬러/배경 변경
• 도시 여러 개를 스크롤 가능한 작은 카드 형태로 나열

---

🧘 마무리하며

Flutter 날씨 앱에서 작은 위젯 UI는 날씨를 더 가깝고 쉽게 느끼게 해주는 장치다.

아주 작은 UI 하나가 전체 앱 경험을 바꾼다.
Flutter로 만든 감성 날씨 앱, 홈 화면에서부터 시작해보자.

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