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

Flutter로 날씨 앱을 만든다면 가장 먼저 고민할 것은 정보를 어떻게 보여줄까다.기온, 날씨 상태, 지역 정보, 시간, 아이콘… 많은 요소를 간결하게 배치해야 보는 사람이 편안하다.이번 글에서는 날씨 앱의 기본 UI 구조부터 디자인 감성까지 고려한 Flutter 레이아웃을 설계해본다.🌤️ 핵심 요소 정리기본적으로 날씨 앱은 다음과 같은 요소를 포함한다:지역 이름 (ex. Seoul)현재 온도 및 날씨 상태 (ex. 23°C, 맑음)아이콘 또는 일러스트 (ex. 해, 구름)습도, 풍속, 체감온도 등의 부가 정보시간대별 or 주간 날씨이 요소들을 얼마나 조화롭게 배치하느냐에 따라 앱의 완성도가 달라진다.📐 기본 레이아웃 구조 잡기Column을 기반으로 전체 화면을 세 부분으로 나눈다:Column( ..

Flutter 앱에서 다크 모드는 이제 ‘선택’이 아닌 ‘기본’이 되었다.특히 일정을 자주 확인하는 캘린더 앱에서는 어두운 환경에서도 눈이 편안해야 한다.이번 글에서는 Flutter에서 다크 모드를 적용하고, table_calendar 위젯도 어두운 테마에 자연스럽게 녹아들게 만드는 방법을 알아보자.🌙 테마 구성 기본MaterialApp에서 라이트/다크 테마를 모두 정의하고, themeMode로 제어한다.MaterialApp( theme: ThemeData( brightness: Brightness.light, scaffoldBackgroundColor: Colors.white, primarySwatch: Colors.indigo, ), darkTheme: ThemeData( ..

캘린더 앱 사용자마다 선호하는 뷰가 다르다.누군가는 한눈에 볼 수 있는 월간 뷰를, 누군가는 집중된 일정 관리가 가능한 주간 뷰를 원한다.이번 글에서는 table_calendar 패키지를 활용해 주간/월간 뷰 전환 기능을 제공하는 방법을 알아보자.📌 table_calendar는 뷰 전환을 기본 지원CalendarFormat을 활용하면 월간, 2주, 주간 보기 전환이 가능하다.내가 따로 레이아웃을 만들 필요 없이 내장된 포맷만 전환하면 된다.CalendarFormat _calendarFormat = CalendarFormat.month;TableCalendar( focusedDay: _focusedDay, firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTim..

Flutter로 일정 관리 앱을 만들고 싶다면, 캘린더 UI 구현부터 시작해야 한다.이번 글에서는 가장 많이 쓰이는 table_calendar 패키지를 이용해 기본적인 달력 UI를 구성하고, 날짜 선택, 이벤트 연결을 위한 준비를 해본다.📦 패키지 설치// pubspec.yamldependencies: table_calendar: ^3.0.9 intl: ^0.18.1table_calendar는 직관적인 API를 제공하며, intl은 날짜 포맷팅에 사용된다.📅 기본 캘린더 위젯 구성TableCalendar( focusedDay: DateTime.now(), firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31),)단 3줄..

메모는 텍스트로만 존재할 필요는 없다.때로는 사진 한 장이 글보다 더 많은 이야기를 담는다.이번 글에서는 Flutter 메모 앱에 사진 첨부 기능을 구현하여 텍스트 + 이미지 기반의 풍부한 메모를 만들어보자.📷 필요한 패키지 설치// pubspec.yamldependencies: image_picker: ^1.0.7 path_provider: ^2.1.2image_picker는 사진을 갤러리/카메라에서 선택하거나 찍는 데 사용된다.🖼️ 이미지 선택 함수 만들기Future pickImage() async { final picker = ImagePicker(); final image = await picker.pickImage(source: ImageSource.gallery); if (imag..