📚 Today I Learned 25회차 - Flutter 일정 관리 앱 만들기 📅

오늘은 Flutter로 일정 관리 앱을 만드는 프로젝트를 시작했습니다! 달력 UI 구현부터 데이터베이스 연동, 서버 통신까지 단계별로 학습하며 실무에 필요한 종합적인 앱 개발 역량을 익히게 될 것 같아 기대가 됩니다. 🎉

🎯 학습 목표

• 일정 관리 앱의 전체 구조와 단계별 개발 과정 이해하기
• TableCalendar 플러그인을 활용한 달력 UI 구현
• Drift와 SQLite를 이용한 로컬 데이터베이스 구축
• 키보드 노출 시 UI 대응 방법 익히기
• pubspec.yaml의 dependencies vs dev_dependencies 차이 이해

📚 프로젝트 개요

📋 미션

일정을 날짜와 시간별로 저장하고 조회하는 앱 구현하기

⭐ 주요 기능

기능	설명
일정 추가	버튼을 눌러 새로운 일정 입력 폼 열기
일정 생성	폼에 정보를 입력하여 새 일정 만들기
일정 조회	달력에서 날짜를 선택해 해당 날짜의 일정 확인
일정 카운트	선택한 날짜에 등록된 일정 개수 표시
데이터 저장	SQLite 로컬 DB 또는 서버에 일정 저장

🛠️ 핵심 구성 요소

📦 일정 관리 앱 기술 스택
├─ 🎨 UI 라이브러리
│  ├─ TableCalendar (달력 위젯)
│  └─ TextFormField (입력 폼)
│
├─ 💾 데이터 관리
│  ├─ SQLite (로컬 데이터베이스)
│  ├─ Drift (SQL ORM)
│  └─ Code Generation (자동 코드 생성)
│
└─ 🌐 네트워크 통신
   ├─ REST API
   └─ Dio (HTTP 클라이언트)

🚀 단계별 개발 로드맵

프로젝트는 점진적으로 발전하는 구조로 진행됩니다:

1단계: 메모리 저장
   ↓
2단계: 로컬 데이터베이스 (SQLite + Drift)
   ↓
3단계: 서버 데이터베이스 연동 (REST API)
   ↓
4단계: Firestore 연동
   ↓
5단계: JWT 인증 구현
   ↓
6단계: 소셜 로그인 & Firebase 인증
   ↓
7단계: Supabase 연동
   ↓
8단계: 광고 및 배포

💡 학습 포인트: 같은 앱을 여러 방식으로 구현하면서 각 기술의 장단점을 비교할 수 있습니다!

💻 TableCalendar 플러그인

📖 개요

TableCalendar는 Flutter에서 가장 많이 사용되는 달력 플러그인으로, 다양한 커스터마이징 옵션을 제공합니다.

⚡ 주요 기능

기능	설명
특정 날짜 선택	단일 날짜 선택 및 포커스
날짜 범위 선택	시작일과 종료일을 지정한 범위 선택
날짜 지정하기	현재 화면에 표시될 연/월 설정
이벤트/일정 표시	각 날짜에 마커나 배지 표시

📝 기본 사용법

// TableCalendar 기본 구현
import 'package:table_calendar/table_calendar.dart';

TableCalendar(
  // 첫 번째 날짜 (달력의 시작 범위)
  firstDay: DateTime.utc(2020, 1, 1),

  // 마지막 날짜 (달력의 끝 범위)
  lastDay: DateTime.utc(2030, 12, 31),

  // 포커스된 날짜 (현재 표시되는 월)
  focusedDay: DateTime.now(),

  // 선택된 날짜
  selectedDayPredicate: (day) {
    return isSameDay(_selectedDay, day);
  },

  // 날짜 선택 시 콜백
  onDaySelected: (selectedDay, focusedDay) {
    setState(() {
      _selectedDay = selectedDay;
      _focusedDay = focusedDay;
    });
  },
)

🔧 pubspec.yaml 설정

📦 Dependencies vs Dev Dependencies

프로젝트 설정 파일인 pubspec.yaml에서 패키지를 추가할 때 두 가지 섹션이 있습니다:

구분	용도	패키징	예시
dependencies	앱 실행에 필요한 패키지	✅ 포함됨	table_calendar, dio, drift
dev_dependencies	개발 시에만 필요한 도구	❌ 제외됨	build_runner, drift_dev, flutter_test

💡 코드 생성 (Code Generation)

Drift와 같은 라이브러리는 코드 생성 기능을 제공합니다:

dependencies:
  drift: ^2.0.0           # 실제 앱에서 사용
  sqlite3_flutter_libs: ^0.5.0

dev_dependencies:
  drift_dev: ^2.0.0       # 코드 생성용 (개발 단계에서만)
  build_runner: ^2.3.0    # 코드 생성 실행기

코드 생성이란?

• Dart 언어로 테이블 정의를 작성하면
• SQL 쿼리가 자동으로 생성되는 기능
• 직접 SQL을 작성하지 않아도 되어 생산성과 안정성 향상

# 코드 생성 실행 명령어
flutter pub run build_runner build

# 변경사항 감지하여 자동 재생성
flutter pub run build_runner watch

⚠️ 주의: 코드 생성은 DB 구조가 변경될 때마다 실행해야 하지만, 앱 실행 시에는 필요 없으므로 dev_dependencies에 포함합니다.

🎨 UI 이슈 해결

⌨️ 키보드 노출 시 위젯 가림 문제

문제 상황:

• 사용자가 TextFormField를 탭하면 키보드가 화면 하단에서 올라옵니다
• 키보드가 입력 필드나 버튼을 가려서 사용성이 떨어집니다

해결 방법: MediaQuery를 사용하여 키보드 높이만큼 화면을 위로 이동시킵니다.

💻 구현 코드

// 키보드 높이를 고려한 BottomSheet 구현
final bottomInset = MediaQuery.of(context).viewInsets.bottom;

return SafeArea(
  child: Container(
    // 화면 높이의 절반 + 키보드 높이
    height: MediaQuery.of(context).size.height / 2 + bottomInset,
    color: Colors.white,

    child: Padding(
      // 아래쪽 패딩을 키보드 높이만큼 추가
      padding: EdgeInsets.only(
        left: 8,
        right: 8,
        top: 8,
        bottom: bottomInset,  // 🔑 핵심: 키보드 높이만큼 패딩 추가
      ),
      child: Column(
        children: [
          // 입력 폼 위젯들
          TextFormField(
            decoration: InputDecoration(labelText: '일정 제목'),
          ),
          // ... 기타 위젯들
        ],
      ),
    ),
  ),
);

🔍 코드 상세 설명

// 1️⃣ 시스템이 차지하는 하단 영역 크기 가져오기
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
// 📱 일반적으로 이 값 = 키보드 높이

// 2️⃣ Container 높이 동적 조정
height: MediaQuery.of(context).size.height / 2 + bottomInset
// 키보드가 나타나면 Container가 자동으로 높아짐

// 3️⃣ 하단 패딩 추가로 컨텐츠를 위로 이동
padding: EdgeInsets.only(bottom: bottomInset)
// 키보드가 올라온 만큼 컨텐츠도 위로 이동

📊 동작 원리

상태	bottomInset	Container 높이	결과
키보드 숨김	0	화면 절반	일반 BottomSheet
키보드 표시	~300px	화면 절반 + 300px	입력 필드가 키보드 위로 이동

🎯 BottomSheet 표시하기

// showModalBottomSheet로 일정 입력 폼 표시
showModalBottomSheet(
  context: context,
  // 키보드가 올라올 때 BottomSheet도 같이 올라가도록 설정
  isScrollControlled: true,
  builder: (context) {
    return ScheduleBottomSheet(); // 위에서 구현한 위젯
  },
);

💡 팁: isScrollControlled: true를 설정하면 BottomSheet 높이를 자유롭게 조절할 수 있습니다!

📝 마무리

✅ 오늘 배운 것

• 프로젝트 구조: 일정 관리 앱의 전체 아키텍처와 8단계 발전 과정
• TableCalendar: Flutter 달력 플러그인의 기본 사용법과 주요 기능
• 패키지 관리: dependencies와 dev_dependencies의 차이점
• 코드 생성: Drift의 자동 SQL 생성 원리와 build_runner 사용법
• UI 대응: MediaQuery.viewInsets를 활용한 키보드 노출 이슈 해결

🚀 다음 계획

1. 달력 UI 완성: TableCalendar 커스터마이징 및 이벤트 마커 표시
2. 입력 폼 구현: 제목, 내용, 시간 선택 기능이 포함된 완전한 일정 입력 화면
3. 메모리 저장: 앱 내 메모리에 일정 데이터 저장 및 조회 기능 구현
4. Drift 학습: SQLite 데이터베이스 설계 및 Drift ORM 사용법 익히기