다이어리 앱

diary_app/ ├── lib/ │ ├── main.dart # 앱 진입점 · 테마 설정 │ ├── services/ │ │ └── file_service.dart # 파일 I/O 서비스 (비즈니스 로직) │ └── pages/ │ ├── home_page.dart # 일기 목록 화면 │ ├── write_page.dart # 일기 작성 화면 │ ├── detail_page.dart # 일기 상세보기 · 수정 화면 │ └── calendar_page.dart # 달력 뷰 화면 ├── guide/ # 강의 노트 문서 폴더 └── pubspec.yaml

flutter create diary_app cd diary_app

flutter pub add path_provider flutter pub add calendar_date_picker2 flutter pub add table_calendar

dependencies: flutter: sdk: flutter path_provider: ^2.0.0 calendar_date_picker2: ^2.0.1 table_calendar: ^3.2.0 flutter_multi_select_items: ^0.4.3

lib/ ├── services/ ← FileService 배치 └── pages/ ← 각 화면 배치

void main() => runApp(const DiaryApp()); class DiaryApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber), useMaterial3: true, ), home: const HomePage(), ); } }

import 'package:path_provider/path_provider.dart'; final dir = await getApplicationDocumentsDirectory(); // → 이 경로 아래에 .txt 파일 저장

Future<void> _pickDate() async { final result = await showCalendarDatePicker2Dialog( context: context, config: CalendarDatePicker2WithActionButtonsConfig( calendarType: CalendarDatePicker2Type.single, selectedDayHighlightColor: Colors.amber, okButton: const Text('확인', style: TextStyle(color: Colors.amber)), cancelButton: const Text('취소'), ), dialogSize: const Size(325, 400), borderRadius: BorderRadius.circular(15), value: [_selectedDate], ); if (result != null && result.isNotEmpty && result.first != null) { setState(() => _selectedDate = result.first!); } }

TableCalendar<DiaryEntry>( firstDay: DateTime(2020), lastDay: DateTime(2100), focusedDay: _focusedDay, selectedDayPredicate: (day) => isSameDay(_selectedDay, day), eventLoader: _eventsFor, // 날짜 → 이벤트 리스트 함수 onDaySelected: _onDaySelected, onPageChanged: (day) => setState(() => _focusedDay = day), calendarStyle: CalendarStyle( todayDecoration: BoxDecoration(color: Colors.amber.shade300, shape: BoxShape.circle), selectedDecoration: BoxDecoration(color: Colors.amber, shape: BoxShape.circle), markerDecoration: BoxDecoration(color: Colors.deepOrange, shape: BoxShape.circle), ), headerStyle: HeaderStyle( formatButtonVisible: false, titleCentered: true, ), )

Map<String, List<DiaryEntry>> _eventMap = {}; List<DiaryEntry> _eventsFor(DateTime day) { final key = '${day.year}-${day.month.toString().padLeft(2, '0')}' '-${day.day.toString().padLeft(2, '0')}'; return _eventMap[key] ?? []; } // 반환된 리스트 크기만큼 날짜 아래에 점(marker)이 표시됨

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Set<String> _selectedPaths = {}; onTap: () => setState(() { if (_selectedPaths.contains(path)) { _selectedPaths.remove(path); } else { _selectedPaths.add(path); } });

2026-03-26_143022.txt

오늘의 일기 제목 ---DIARY--- 오늘은 날씨가 맑았다. Flutter 공부를 열심히 했다. 여러 줄도 가능하다.

class DiaryEntry { final String path; // 파일 절대 경로 (기본 키) final String date; // "YYYY-MM-DD" (UI 표시용) final String time; // "HH:mm:ss" (UI 표시용) final String title; // 제목 (목록에서 미리 로드) }

// 저장: 제목 + 구분자 + 본문 → 하나의 문자열 String _serialize(String title, String content) => '$title\\n---DIARY---\\n$content'; // 읽기: 제목 추출 String parseTitleFromRaw(String raw) { final idx = raw.indexOf('\\n---DIARY---\\n'); if (idx == -1) return ''; return raw.substring(0, idx); } // 읽기: 본문 추출 String parseContentFromRaw(String raw) { final sep = '\\n---DIARY---\\n'; final idx = raw.indexOf(sep); if (idx == -1) return raw; // 구분자 없으면 전체가 본문 (구버전 호환) return raw.substring(idx + sep.length); }

Future<void> saveDiaryForDate(String date, String title, String content) async { final dirPath = await getDirPath(); final now = DateTime.now(); final t = '${now.hour.toString().padLeft(2, '0')}' '${now.minute.toString().padLeft(2, '0')}' '${now.second.toString().padLeft(2, '0')}'; final file = File('$dirPath/${date}_$t.txt'); await file.writeAsString(_serialize(title, content)); }

Future<void> saveDiaryToPath(String path, String title, String content) async { await File(path).writeAsString(_serialize(title, content)); } // 경로가 고정 → 파일명(날짜·시각) 변경 없이 내용만 덮어씌움

Future<String> changeDiaryDate( String oldPath, String newDate, String title, String content) async { final dirPath = await getDirPath(); final name = oldPath.split(Platform.pathSeparator).last.replaceAll('.txt', ''); final timePart = name.contains('_') ? name.split('_').last : ''; final newPath = '$dirPath/${newDate}_$timePart.txt'; await File(newPath).writeAsString(_serialize(title, content)); await File(oldPath).delete(); return newPath; }

Future<List<DiaryEntry>> getDiaryEntries() async { final dir = Directory(await getDirPath()); final txts = dir.listSync().where((e) => e.path.endsWith('.txt')).toList(); txts.sort((a, b) => b.path.compareTo(a.path)); // 최신순 정렬 final entries = <DiaryEntry>[]; for (final f in txts) { final raw = await File(f.path).readAsString(); entries.add(DiaryEntry( path: f.path, date: getDateFromPath(f.path), time: getTimeFromPath(f.path), title: parseTitleFromRaw(raw), )); } return entries; }

// "2026-03-26_143022.txt" → "2026-03-26" String getDateFromPath(String path) { final name = path.split(Platform.pathSeparator).last.replaceAll('.txt', ''); return name.contains('_') ? name.split('_').first : name; } // "2026-03-26_143022.txt" → "14:30:22" String getTimeFromPath(String path) { final name = path.split(Platform.pathSeparator).last.replaceAll('.txt', ''); final t = name.split('_').last; return '${t.substring(0, 2)}:${t.substring(2, 4)}:${t.substring(4, 6)}'; }

Future<List<DiaryEntry>> searchEntries(String query) async { final all = await getDiaryEntries(); final q = query.toLowerCase(); final result = <DiaryEntry>[]; for (final entry in all) { // 1차: 날짜 or 제목 (이미 로드된 정보 → 추가 I/O 없음) if (entry.date.contains(q) || entry.title.toLowerCase().contains(q)) { result.add(entry); continue; } // 2차: 본문 (필요한 경우에만 파일 추가 읽기) final raw = await readDiaryRaw(entry.path); if (parseContentFromRaw(raw).toLowerCase().contains(q)) { result.add(entry); } } return result; }

Future<void> deleteMultiple(List<String> paths) async { for (final p in paths) { await deleteDiary(p); // File(path).delete() } }

사용자 동작 │ ▼ HomePage / WritePage / DetailPage │ 호출 ▼ FileService (file_service.dart) │ ├── 쓰기 → saveDiaryForDate / saveDiaryToPath / changeDiaryDate │ └── File.writeAsString(_serialize(title, content)) │ ├── 읽기 → getDiaryEntries / readDiaryRaw │ └── File.readAsString → parseTitleFromRaw / parseContentFromRaw │ ├── 삭제 → deleteDiary / deleteMultiple │ └── File.delete() │ └── 검색 → searchEntries └── getDiaryEntries + 본문 순차 검색

1. _loadDiaries() → getDiaryEntries() 호출, 상태 저장 2. _buildNormalList() → ListView.builder + Dismissible 카드 3. _buildAppBar() → 검색 모드 TextField / 일반 모드 제목 4. _buildDrawer() → 사이드 메뉴 5. _buildMultiSelectList() → Set<String>으로 다중 선택 관리 6. 검색 로직 → Timer 디바운스 500ms

Timer? _debounce; void _onSearchChanged(String query) { _debounce?.cancel(); // 이전 타이머 취소 _debounce = Timer( const Duration(milliseconds: 500), () async { final results = await _fileService.searchEntries(query); setState(() => _filteredList = results); }, ); }

Set<String> _selectedPaths = {}; // 전체 선택 _selectedPaths = _filteredList.map((e) => e.path).toSet(); // 전체 해제 _selectedPaths.clear(); // 토글 _selectedPaths.contains(path) ? _selectedPaths.remove(path) : _selectedPaths.add(path);

1. _titleController → 제목 입력 필드 2. _controller → 본문 입력 필드 (expands: true로 남은 공간 채움) 3. _selectedDate → DateTime 상태 (기본: 오늘) 4. _pickDate() → calendar_date_picker2 다이얼로그 5. _save() → 유효성 검사 → saveDiaryForDate() → Navigator.pop() 6. bottomSheet → "작성하기" 버튼 (화면 하단 고정)

Scaffold ├── AppBar (저장 아이콘) ├── bottomSheet (작성하기 ElevatedButton) └── body (Padding fromLTRB(16, 16, 16, 80)) └── Column ├── InkWell → 날짜 선택 Row ├── SizedBox(height: 14) ├── TextField (제목) ├── SizedBox(height: 12) └── Expanded → TextField (본문, expands: true)

1. _loadContent() → readDiaryRaw() → parseTitleFromRaw / parseContentFromRaw 2. 보기 모드 → 제목(굵게) + Divider + 본문 텍스트 3. 수정 모드 진입 → _isEditing = true 4. 편집 UI → 날짜 선택 행 + 제목 TextField + 본문 TextField (Expanded) 5. _saveEdit() → 날짜 변경 여부 분기 ├── 날짜 동일 → saveDiaryToPath() → setState(_isEditing = false) └── 날짜 변경 → changeDiaryDate() → Navigator.pop() (파일명이 바뀌므로)

if (_selectedDateStr != widget.date) { await _fileService.changeDiaryDate( widget.path, _selectedDateStr, title, content); Navigator.pop(context); // 목록 화면으로 돌아가 자동 새로고침 return; }

1. _loadEntries() → getDiaryEntries() → Map<String, List<DiaryEntry>> 변환 2. _eventsFor(day) → 날짜 키 → 일기 목록 반환 (eventLoader) 3. TableCalendar → 마커 표시 + 날짜 선택 이벤트 4. _onDaySelected() → 1개: 바로 DetailPage / 2개 이상: BottomSheet 선택 5. _buildSelectedDayList() → 달력 아래 선택일 일기 목록

final entries = await _fileService.getDiaryEntries(); final map = <String, List<DiaryEntry>>{}; for (final e in entries) { map.putIfAbsent(e.date, () => []).add(e); // "2026-03-26" → [DiaryEntry, DiaryEntry, ...] }

void _onDaySelected(DateTime selectedDay, DateTime focusedDay) { setState(() { _selectedDay = selectedDay; _focusedDay = focusedDay; }); final entries = _eventsFor(selectedDay); if (entries.isEmpty) return; if (entries.length == 1) { _openDetail(entries.first); // 1개 → 바로 상세보기 } else { _showPickerSheet(entries); // 2개 이상 → BottomSheet 목록 } }

Widget _buildDrawer() { return Drawer( child: ListView( padding: EdgeInsets.zero, // DrawerHeader가 상단에 딱 붙도록 children: [ const DrawerHeader( decoration: BoxDecoration(color: Colors.amber), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.end, children: [ Icon(Icons.menu_book, size: 48, color: Colors.white), SizedBox(height: 8), Text('내 일기장', style: TextStyle( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold)), ], ), ), ListTile( leading: const Icon(Icons.calendar_month), title: const Text('달력으로 보기'), onTap: () { Navigator.pop(context); // Drawer 먼저 닫기 Navigator.push(context, MaterialPageRoute( builder: (_) => const CalendarPage())); }, ), ], ), ); }

Dismissible( key: Key(entry.path), // 파일 경로를 고유 키로 사용 direction: DismissDirection.endToStart, // 왼쪽 스와이프만 허용 background: Container( alignment: Alignment.centerRight, padding: const EdgeInsets.only(right: 20), margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 4), decoration: BoxDecoration( color: Colors.redAccent, borderRadius: BorderRadius.circular(12), ), child: const Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.delete, color: Colors.white, size: 28), Text('삭제', style: TextStyle(color: Colors.white, fontSize: 12)), ], ), ), confirmDismiss: (_) => showDialog<bool>( context: context, builder: (ctx) => AlertDialog( title: const Text('일기 삭제'), content: Text('[$date] 일기를 삭제하시겠습니까?'), actions: [ TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text('취소')), TextButton(onPressed: () => Navigator.pop(ctx, true), child: const Text('삭제', style: TextStyle(color: Colors.red))), ], ), ), onDismissed: (_) => _deleteSingle(entry.path), child: Card(child: ListTile(...)), )

// ❌ 잘못된 예 — 인덱스를 키로 사용 key: Key(index.toString()) // 삭제 후 다음 항목이 같은 키를 가져 오동작 가능 // ✅ 올바른 예 — 고유한 식별자를 키로 사용 key: Key(entry.path) // 파일 경로는 항상 고유

showModalBottomSheet( context: context, shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(16)), ), builder: (ctx) => Column( mainAxisSize: MainAxisSize.min, // 내용 높이에만 맞춤 children: [ Container(width: 40, height: 4, decoration: BoxDecoration(color: Colors.grey.shade300, borderRadius: BorderRadius.circular(2))), ListView.builder(shrinkWrap: true, ...), ], ), );

floatingActionButton: _isMultiSelect ? null // 다중 선택 모드에서는 숨김 : FloatingActionButton( onPressed: () async { await Navigator.push( context, MaterialPageRoute(builder: (_) => const WritePage()), ); _loadDiaries(); // 돌아온 후 목록 새로고침 }, backgroundColor: Colors.amber, foregroundColor: Colors.black, child: const Icon(Icons.edit), ),

Scaffold( bottomSheet: SafeArea( child: Padding( padding: const EdgeInsets.fromLTRB(16, 8, 16, 12), child: SizedBox( width: double.infinity, height: 52, child: ElevatedButton.icon( onPressed: _isSaving ? null : _save, icon: const Icon(Icons.edit_note), label: const Text('작성하기'), style: ElevatedButton.styleFrom( backgroundColor: Colors.amber, foregroundColor: Colors.black, ), ), ), ), ), body: Padding( padding: const EdgeInsets.fromLTRB(16, 16, 16, 80), // 하단 80px 패딩 추가 ... ), )

# 잘못된 버전 지정 예 calendar_date_picker2: ^0.9.0 # ❌ 존재하지 않는 버전

flutter pub add calendar_date_picker2 # → ^2.0.1 자동 설치

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Set-Content -Path "경로\\파일.dart" -Value $content -Encoding UTF8

... bottomSheet: SafeArea( child: Padding( // ⚡ System Navigation Bar [ ||| ㅁ < ] 위로 BottomSheet 버튼 겹치는 문제 해결 // padding: const EdgeInsets.fromLTRB(16, 8, 16, 12), padding: EdgeInsets.fromLTRB(16, 8, 16,MediaQuery.of(context).padding.bottom + 12, ), ...

MediaQuery.of(context)

MediaQuery.of(context).padding.bottom

Padding( padding: EdgeInsets.only( bottom: MediaQuery.of(context).padding.bottom ), child: ElevatedButton( onPressed: () {}, child: Text("저장"), ), )

MediaQuery.of(context).viewInsets.bottom

MediaQuery.of(context).padding.bottom

padding: EdgeInsets.only( bottom: MediaQuery.of(context).padding.bottom + MediaQuery.of(context).viewInsets.bottom )

MediaQuery.of(context).padding.bottom