시간대별/주간 날씨 예보 표시
·
Flutter/Flutter 날씨 앱 만들기
Flutter 날씨 앱에서 현재 날씨만 보여주는 건 부족하다.앞으로 몇 시간 후, 며칠 후 날씨까지 보여줘야 사용자는 더 똑똑하게 하루를 계획할 수 있다.이번 글에서는 OpenWeather의 forecast API를 이용해 시간대별 및 주간 예보를 Flutter 앱에 구현해보자.🌤️ forecast API 사용하기OpenWeatherMap은 두 가지 예보 API를 제공한다.5-day / 3-hour forecast → 3시간 간격으로 5일치 예보One Call API → 현재, 분단위, 시간별, 일별 통합 정보 제공 (유료 포함)이번 글에서는 /forecast 엔드포인트를 사용한다.https://api.openweathermap.org/data/2.5/forecast?lat={lat}&lon={lon}..
위치 기반 날씨 정보 — GPS 권한 설정과 위치 사용
·
Flutter/Flutter 날씨 앱 만들기
사용자 위치를 기반으로 현재 위치의 날씨를 보여주는 건 날씨 앱의 핵심 기능 중 하나다.이번 글에서는 Flutter에서 위치 권한 요청부터 GPS 정보 추출, 그리고 해당 좌표를 기반으로 OpenWeather API에 날씨 요청까지의 전체 흐름을 구현해본다.📦 필요 패키지 설치// pubspec.yamldependencies: geolocator: ^10.1.0 http: ^0.13.5geolocator는 GPS 위치를 가져오는 대표적인 패키지다.🔑 Android/iOS 권한 설정✅ Android ... ✅ iOS// Info.plistNSLocationWhenInUseUsageDescription앱이 현재 위치를 사용합니다.권한 설정이 누락되면 앱이 위치 정보를 가져올 수 없으니 주의!📍 ..
OpenWeather API 연동하기 — 실시간 날씨 받아오기
·
Flutter/Flutter 날씨 앱 만들기
멋진 날씨 앱을 만들기 위해서는 실시간 날씨 정보를 가져오는 게 핵심이다.이번 글에서는 Flutter에서 OpenWeather API를 연동해 기온, 상태, 아이콘 등의 데이터를 받아오는 과정을 정리해본다.🌐 OpenWeatherMap API란?https://openweathermap.org 에서 제공하는 공개 날씨 API로,도시, 위도/경도, ZIP 코드 등 다양한 방법으로 현재 날씨, 예보, 과거 데이터까지 받아올 수 있다.API 형태: REST + JSON요청 URL 예시: https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid={API_KEY}&units=metric🔑 API Key 발급 받기OpenWeatherMap 회원가입API Key..
날씨 앱 UI 디자인 — 깔끔하고 직관적인 레이아웃
·
Flutter/Flutter 날씨 앱 만들기
Flutter로 날씨 앱을 만든다면 가장 먼저 고민할 것은 정보를 어떻게 보여줄까다.기온, 날씨 상태, 지역 정보, 시간, 아이콘… 많은 요소를 간결하게 배치해야 보는 사람이 편안하다.이번 글에서는 날씨 앱의 기본 UI 구조부터 디자인 감성까지 고려한 Flutter 레이아웃을 설계해본다.🌤️ 핵심 요소 정리기본적으로 날씨 앱은 다음과 같은 요소를 포함한다:지역 이름 (ex. Seoul)현재 온도 및 날씨 상태 (ex. 23°C, 맑음)아이콘 또는 일러스트 (ex. 해, 구름)습도, 풍속, 체감온도 등의 부가 정보시간대별 or 주간 날씨이 요소들을 얼마나 조화롭게 배치하느냐에 따라 앱의 완성도가 달라진다.📐 기본 레이아웃 구조 잡기Column을 기반으로 전체 화면을 세 부분으로 나눈다:Column( ..
사용자 맞춤 컬러 태그 시스템 구현
·
Flutter/Flutter 캘린더 앱 만들기
캘린더에 일정이 많아질수록, 구분과 시각적 구별이 중요해진다.이럴 때 컬러 태그를 사용하면 일정 유형을 한눈에 파악할 수 있다.이번 글에서는 Flutter에서 사용자 맞춤형 태그 시스템을 설계하고, 각 태그에 컬러를 부여해 시각적으로 구분하는 기능을 구현해본다.🏷️ 태그 데이터 구조 설계이벤트마다 태그와 색상을 함께 저장할 수 있도록 모델을 수정한다.class Event { final String title; final String tag; final Color tagColor; Event({ required this.title, required this.tag, required this.tagColor, });}컬러는 Color 객체로 관리하거나, Hex 코드로 DB에 저장할..
서버와 동기화 — Google Calendar API 연동하기
·
Flutter/Flutter 캘린더 앱 만들기
Flutter로 만든 캘린더 앱이 진짜 ‘앱’이 되기 위해 필요한 건 클라우드와의 동기화다.이번 글에서는 Google Calendar API를 사용해 Flutter 앱과 구글 캘린더 간 일정 동기화를 구현하는 흐름을 소개한다.📌 Google Calendar API란?Google이 제공하는 공식 캘린더 API로,캘린더 조회, 일정 생성/삭제, 알림 설정까지 REST 방식으로 조작할 수 있다.기본 프로토콜: HTTPS REST인증 방식: OAuth 2.0사용 예: Google Calendar 앱과 일정 동기화📦 필요한 패키지dependencies: googleapis: ^13.1.0 googleapis_auth: ^1.4.0 http: ^0.13.5Flutter에서는 직접 API 요청을 보내거나, ..