Flutter로 캘린더 앱을 만들 때, 사용자는 가장 먼저 “오늘”을 확인한다.또한 날짜별로 이벤트가 있는지를 쉽게 파악할 수 있어야 한다.이번 글에서는 table_calendar 패키지를 활용해 오늘 날짜 강조와 이벤트 마커 표시 기능을 구현해보자.🌞 오늘 날짜 강조하기calendarStyle 옵션을 활용하면 오늘 날짜에만 스타일을 적용할 수 있다.calendarStyle: CalendarStyle( todayDecoration: BoxDecoration( color: Colors.orange.shade300, shape: BoxShape.circle, ), todayTextStyle: TextStyle( fontWeight: FontWeight.bold, color: Co..

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

캘린더 UI를 만들었으면 이제 그 안에 할 일이나 이벤트를 추가할 차례다.이번 글에서는 table_calendar 위젯에 날짜별 할 일 등록 및 표시 기능을 구현해본다.📦 이벤트 데이터를 어떻게 저장할까?Map> _events = { DateTime(2024, 10, 1): ['회의', 'Flutter 과제 제출'], DateTime(2024, 10, 2): ['블로그 작성'],};각 날짜를 key로, 해당 날짜에 등록된 이벤트 목록을 List로 관리한다.📅 table_calendar에 이벤트 연결TableCalendar( focusedDay: _focusedDay, firstDay: DateTime.utc(2020, 1, 1), lastDay: DateTime.utc(2030, 12, 31..

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 메모 앱이 진짜 앱이 되는 순간은, 기기가 바뀌거나 앱을 삭제해도 내 메모가 안전하게 남아있을 때다.이번 글에서는 Firebase Firestore를 활용해 메모를 클라우드에 백업/복원하는 방법을 정리한다.☁️ Firestore란?Cloud Firestore는 Google Firebase에서 제공하는 NoSQL 클라우드 데이터베이스로, Flutter와의 연동이 매우 쉬우며 실시간 동기화에도 강력하다.📦 패키지 설치 및 초기 설정// pubspec.yamldependencies: firebase_core: ^2.24.2 cloud_firestore: ^4.13.2Firebase 프로젝트 생성 후 google-services.json 또는 GoogleService-Info.plist를 설..

메모가 많아질수록, 필요한 메모를 찾는 시간이 늘어난다.검색 기능은 사용자의 시간을 아끼는 가장 강력한 도구다.이번 글에서는 Flutter 메모 앱에 키워드 기반의 검색 기능을 구현하는 방법을 정리한다.실시간 필터링부터 DB 쿼리 기반 검색까지 두 가지 방식으로 살펴보자.🔍 기본 구조: 실시간 검색가장 직관적인 방식은 전체 메모 리스트 중에서 텍스트로 필터링하는 방식이다.✅ 상태 변수 정의List _allMemos = [];List _filteredMemos = [];String _keyword = "";✅ 검색어 입력 필드TextField( decoration: InputDecoration( hintText: '메모 검색', prefixIcon: Icon(Icons.search), ),..