위젯처럼 홈 화면에서 현재 날씨 보여주기
·
Flutter/Flutter 날씨 앱 만들기
모든 사용자가 앱을 직접 켜는 건 귀찮다.홈 화면에서 바로 현재 날씨를 확인할 수 있다면 얼마나 편할까?이번 글에서는 Flutter로 날씨 앱을 만들 때, 위젯처럼 보이는 요약 날씨 UI를 앱 첫 화면 혹은 특정 영역에 표시하는 방법을 정리해본다.📌 목표 UI 구성아래와 같은 구성으로 간단한 날씨 요약 카드를 만들자:현재 위치 또는 선택된 도시현재 온도 + 날씨 상태작은 아이콘 또는 애니메이션┌────────────────────────────┐ │ 🌤 Seoul │ │ 24°C | Clear Sky │ └────────────────────────────┘🌐 날씨 데이터 불러오기Future> fetchWeather(String city) as..
단위 설정 (섭씨/화씨) 변경 기능 구현
·
Flutter/Flutter 날씨 앱 만들기
기온을 보는 방식은 지역마다 다르다. 한국과 대부분의 국가는 섭씨(°C)를 사용하고, 미국은 화씨(°F)를 사용한다.이번 글에서는 Flutter 날씨 앱에서 사용자가 섭씨/화씨 단위를 전환할 수 있는 기능을 직접 구현해본다.🌡️ OpenWeather API의 단위 지원OpenWeather API는 단위를 간단한 파라미터로 조절할 수 있다.units=metric // 섭씨units=imperial // 화씨아무 단위도 지정하지 않으면 Kelvin(기본값)으로 반환되니 반드시 설정해줘야 한다.⚙️ 단위 설정 상태 관리앱 전체에서 사용할 수 있도록 enum과 상태 변수를 관리하자.enum TempUnit { celsius, fahrenheit }TempUnit currentUnit = TempUni..
즐겨찾는 도시 날씨 추가 및 리스트 보기
·
Flutter/Flutter 날씨 앱 만들기
여러 도시의 날씨를 확인하고 싶은 사용자를 위해 즐겨찾기 기능은 필수다.이번 글에서는 Flutter 앱에서 여러 도시를 저장하고, 각 도시의 날씨 정보를 리스트 형태로 나열해주는 UI를 만들어본다.📦 도시 리스트 저장 구조 설계List favoriteCities = ['Seoul', 'Tokyo', 'London'];간단한 리스트로 도시 이름을 저장하고, SharedPreferences 등을 통해 로컬 저장도 가능하게 만든다.➕ 도시 추가 UI 만들기TextEditingController _cityController = TextEditingController();TextField( controller: _cityController, decoration: InputDecoration( label..
위치 기반 날씨 정보 — GPS 권한 설정과 위치 사용
·
Flutter/Flutter 날씨 앱 만들기
사용자 위치를 기반으로 현재 위치의 날씨를 보여주는 건 날씨 앱의 핵심 기능 중 하나다.이번 글에서는 Flutter에서 위치 권한 요청부터 GPS 정보 추출, 그리고 해당 좌표를 기반으로 OpenWeather API에 날씨 요청까지의 전체 흐름을 구현해본다.📦 필요 패키지 설치// pubspec.yamldependencies: geolocator: ^10.1.0 http: ^0.13.5geolocator는 GPS 위치를 가져오는 대표적인 패키지다.🔑 Android/iOS 권한 설정✅ Android ... ✅ iOS// Info.plistNSLocationWhenInUseUsageDescription앱이 현재 위치를 사용합니다.권한 설정이 누락되면 앱이 위치 정보를 가져올 수 없으니 주의!📍 ..