728x90
반응형
Flutter로 만든 캘린더 앱이 진짜 ‘앱’이 되기 위해 필요한 건 클라우드와의 동기화다.
이번 글에서는 Google Calendar API를 사용해 Flutter 앱과 구글 캘린더 간 일정 동기화를 구현하는 흐름을 소개한다.
📌 Google Calendar API란?
Google이 제공하는 공식 캘린더 API로,
캘린더 조회, 일정 생성/삭제, 알림 설정까지 REST 방식으로 조작할 수 있다.
- 기본 프로토콜: HTTPS REST
- 인증 방식: OAuth 2.0
- 사용 예: Google Calendar 앱과 일정 동기화
📦 필요한 패키지
dependencies:
googleapis: ^13.1.0
googleapis_auth: ^1.4.0
http: ^0.13.5
Flutter에서는 직접 API 요청을 보내거나, Google API 패키지를 사용할 수 있다.
🔑 OAuth 2.0 인증 구성
Google Cloud Console에서 OAuth 클라이언트 ID를 발급받아야 한다.
- https://console.cloud.google.com 접속
- API 및 서비스 → 사용자 인증 정보
- OAuth 클라이언트 ID 생성 (앱 타입: Android or iOS)
- Redirect URI 등록
// 예시 인증 로직 (googleapis_auth)
final accountCredentials = ServiceAccountCredentials.fromJson(r'''
{
"private_key_id": "...",
"private_key": "...",
"client_email": "...",
...
}
''');
final scopes = [CalendarApi.calendarScope];
final authClient = await clientViaServiceAccount(accountCredentials, scopes);
final calendarApi = CalendarApi(authClient);
OAuth 인증이 완료되면 API 사용이 가능해진다.
📅 일정 목록 가져오기
final events = await calendarApi.events.list("primary");
for (var item in events.items!) {
print("${item.summary} at ${item.start?.dateTime}");
}
구글 캘린더에 등록된 모든 일정을 가져올 수 있다.
➕ 일정 추가하기
final event = Event()
..summary = "Flutter 회의"
..start = EventDateTime(dateTime: DateTime.now().add(Duration(hours: 2)))
..end = EventDateTime(dateTime: DateTime.now().add(Duration(hours: 3)));
await calendarApi.events.insert(event, "primary");
Flutter 앱에서 일정 등록 시, Google Calendar에도 바로 반영된다.
📌 동기화 UX 설계 팁
- 구글 로그인 → 일정 동기화 버튼으로 흐름 분리
- Local ↔ Server 충돌 시 시간 기준으로 병합
- 구글 캘린더의
recurringEventId
활용으로 반복 이벤트도 처리 가능
🧘 마무리하며
Flutter 캘린더 앱이 구글 캘린더와 동기화되는 순간, 그건 단순한 개인 앱을 넘어선 일정 관리 플랫폼이 된다.
로컬을 넘어서, 서버까지 연결된 경험을 Flutter로 완성해보자.
✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 캘린더 앱 만들기 여정입니다.
728x90
반응형
'Flutter > Flutter 캘린더 앱 만들기' 카테고리의 다른 글
사용자 맞춤 컬러 태그 시스템 구현 (0) | 2025.06.07 |
---|---|
다크 모드 캘린더 디자인 적용 (0) | 2025.06.05 |
이벤트 반복 설정 구현 — 매주, 매달 반복 어떻게 할까? (0) | 2025.06.04 |
할 일 완료 체크 및 삭제 기능 추가 (2) | 2025.06.03 |
이벤트 알림 기능 — Flutter Local Notification 활용하기 (0) | 2025.06.02 |