모든 사용자가 앱을 직접 켜는 건 귀찮다.홈 화면에서 바로 현재 날씨를 확인할 수 있다면 얼마나 편할까?이번 글에서는 Flutter로 날씨 앱을 만들 때, 위젯처럼 보이는 요약 날씨 UI를 앱 첫 화면 혹은 특정 영역에 표시하는 방법을 정리해본다.📌 목표 UI 구성아래와 같은 구성으로 간단한 날씨 요약 카드를 만들자:현재 위치 또는 선택된 도시현재 온도 + 날씨 상태작은 아이콘 또는 애니메이션┌────────────────────────────┐ │ 🌤 Seoul │ │ 24°C | Clear Sky │ └────────────────────────────┘🌐 날씨 데이터 불러오기Future> fetchWeather(String city) as..

기온을 보는 방식은 지역마다 다르다. 한국과 대부분의 국가는 섭씨(°C)를 사용하고, 미국은 화씨(°F)를 사용한다.이번 글에서는 Flutter 날씨 앱에서 사용자가 섭씨/화씨 단위를 전환할 수 있는 기능을 직접 구현해본다.🌡️ OpenWeather API의 단위 지원OpenWeather API는 단위를 간단한 파라미터로 조절할 수 있다.units=metric // 섭씨units=imperial // 화씨아무 단위도 지정하지 않으면 Kelvin(기본값)으로 반환되니 반드시 설정해줘야 한다.⚙️ 단위 설정 상태 관리앱 전체에서 사용할 수 있도록 enum과 상태 변수를 관리하자.enum TempUnit { celsius, fahrenheit }TempUnit currentUnit = TempUni..

여러 도시의 날씨를 확인하고 싶은 사용자를 위해 즐겨찾기 기능은 필수다.이번 글에서는 Flutter 앱에서 여러 도시를 저장하고, 각 도시의 날씨 정보를 리스트 형태로 나열해주는 UI를 만들어본다.📦 도시 리스트 저장 구조 설계List favoriteCities = ['Seoul', 'Tokyo', 'London'];간단한 리스트로 도시 이름을 저장하고, SharedPreferences 등을 통해 로컬 저장도 가능하게 만든다.➕ 도시 추가 UI 만들기TextEditingController _cityController = TextEditingController();TextField( controller: _cityController, decoration: InputDecoration( label..

기온, 상태, 습도 같은 날씨 데이터는 숫자로도 표현할 수 있지만, 아이콘과 애니메이션이 함께할 때 훨씬 직관적이고 감성적이다.이번 글에서는 Flutter에서 날씨 상태별 아이콘과 Lottie 애니메이션을 적용해 UI를 생동감 있게 만드는 방법을 알아보자.🌤️ OpenWeather 날씨 코드 이해하기OpenWeather API는 상태에 따라 icon 또는 main 값을 반환한다:"weather": [ { "main": "Rain", "description": "light rain", "icon": "10d" }]이 값을 기반으로 이미지 또는 애니메이션 리소스를 연결한다.📌 날씨 상태별 아이콘 매핑String getWeatherIcon(String main) { switch (ma..

기온, 습도, 풍속… 날씨 정보를 숫자로만 보여주면 사용자에게 큰 인상을 주기 어렵다.이번 글에서는 Flutter에서 온도, 습도, 바람을 감각적으로 시각화하는 UI를 구현해본다.🌡️ 온도 게이지 UI 만들기현재 기온을 수은주 형태로 표현하면 사용자에게 체감도를 전달할 수 있다.// flutter_gauge 패키지 추천dependencies: flutter_gauge: ^1.0.4FlutterGauge( handSize: 30, width: 200, index: temperature, fontFamily: "Roboto", end: 50, number: Number.endAndCenter, secondsMarker: SecondsMarker.secondsAndMinute, isCircl..

날씨 앱은 단순한 정보 앱을 넘어 하루의 분위기를 담아야 한다.특히 날씨에 따라 배경 이미지나 애니메이션이 바뀌면 사용자에게 더 몰입감 있는 경험을 제공할 수 있다.이번 글에서는 Flutter에서 날씨 상태에 따라 배경을 동적으로 변경하고, 애니메이션 효과까지 입히는 감성 UI를 만들어본다.🌤️ 날씨 상태 기반 배경 전환OpenWeather API에서 날씨 상태는 다음과 같이 전달된다:"weather": [ { "main": "Clear", "description": "clear sky", "icon": "01d" }]weather[0].main 값을 기준으로 배경을 매핑하면 된다.🖼️ 상태별 배경 이미지 매핑String getBackgroundAsset(String weather..