★★★★★
#앱별 실전 패턴 · claude-code
[prayer_app] table_calendar로 기도 캘린더 구현
prayer_app에 기도 캘린더 (월간 달력) 추가.
#prayer-app#calendar#table-calendar
prayer_app에 기도 캘린더 (월간 달력) 추가.
패키지: `table_calendar: ^3.0.0`
구현:
```dart
class PrayerCalendarScreen extends StatefulWidget {
@override
State<PrayerCalendarScreen> createState() => _PrayerCalendarScreenState();
}
class _PrayerCalendarScreenState extends State<PrayerCalendarScreen> {
late DateTime _focusedDay;
late DateTime _selectedDay;
late Map<DateTime, List<Prayer>> _prayerMap;
@override
void initState() {
super.initState();
_focusedDay = DateTime.now();
_selectedDay = DateTime.now();
_loadPrayers();
}
Future<void> _loadPrayers() async {
final snap = await db.collection('prayers')
.where('userId', isEqualTo: currentUserId)
.get();
_prayerMap = {};
for (final doc in snap.docs) {
final prayer = Prayer.fromDoc(doc);
final date = DateTime(
prayer.createdAt.year,
prayer.createdAt.month,
prayer.createdAt.day,
);
_prayerMap.putIfAbsent(date, () => []).add(prayer);
}
setState(() {});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
TableCalendar(
firstDay: DateTime(2023),
lastDay: DateTime(2025),
focusedDay: _focusedDay,
selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
});
},
eventLoader: (day) => _prayerMap[day] ?? [],
),
Expanded(
child: ListView(
children: (_prayerMap[_selectedDay] ?? [])
.map((prayer) => PrayerCard(prayer: prayer))
.toList(),
),
),
],
);
}
}
```
참고 문서: https://github.com/aleksanderwozniak/table_calendar
적용할까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.