Flutter 로 앱 개발 및 릴리즈 - 04. Calendar 페이지

2025.05.05 - [개발 이야기/개발 및 서비스] - Flutter 로 앱 개발 및 릴리즈 - 00. 마음의 준비

2025.05.05 - [개발 이야기/개발 및 서비스] - Flutter 로 앱 개발 및 릴리즈 - 01. 생성 및 시뮬레이터 테스트

2025.05.06 - [개발 이야기/개발 및 서비스] - Flutter 로 앱 개발 및 릴리즈 - 02. 폴더 구조 정리

2025.05.07 - [개발 이야기/개발 및 서비스] - Flutter 로 앱 개발 및 릴리즈 - 03. Flutter Compoent와 Native Component

오늘은 캘린터 탭 페이지를 만들어 보겠습니다.

우선 calendar 탭 페이지만을 위한 lib/calendar_page.dart 파일을 생성하고 다음 코드를 추가합니다. 

import 'package:flutter/material.dart';

class CalendarPage extends StatelessWidget {
  const CalendarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Calendar Page'),
    );
  }
}

아직은 캘린터 컴포넌트를 추가하지 않고 별도 파일로 분리만 합니다. 그리고 기존 lib/navi_bar.dart 파일을 아래와 같이 수정/추가합니다.

.
.
import 'calendar_page.dart';
.
.

  final List<Widget> _pages = <Widget>[
    const CalendarPage(),   // import 한 페이지 함수로 연결합니다.
    const Center(child: Text('Project')),
    const Center(child: Text('Setting')),
  ];
.
.
.

이제 페이지 탭을 누르면 lib/calendar_page.dart의 코드가 연결되는걸 확인 할 수 있습니다.

이제 캘린터를 위한 코드 작업 준비가 되었습니다. 이제 캘릭터 컴포넌트를 추가해 보겠습니다.

Gemin에게 요청:  calendar_page.dart 파일을 생성하고 텍스트가 아닌 실제 캘린터 컴포넌트를 출력하는 코드를 작성해줘.

Gemini가 추천한 여러 calender  컴포넌트 중 https://pub.dev/packages/syncfusion_flutter_calendar 가 가장 깔끔하고 많은 기능을 지원하는 것 같습니다. (확장 컴포넌트를 활용할 때는 다음과 같은 순서로 적용해 사용할 수 있으니 참고하세요.)

/pubspec.yaml 파일에서 dep 항목을 찾아 아래와 같이 내용을 추가합니다.

.
.
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  syncfusion_flutter_calendar: ^29.1.41 # 캘리더 컴포넌트 추가
  .
  .

해당 컴포넌트를 설치하는 방법은 여러가지가 있네요. 일단 pubspec.yaml을 한번에 설정할 때는 VSCode > Flutter > Flutter pub get을 실행하면 모든 컴포넌트를 설치합니다.

혹은 > Flutter pub add 를 선택하면 하나의 컴포넌트만 추가할 수 있습니다.

참고로 콘솔에서 커멘드로도 가능합니다. 

이제 calendar_page.dart를 아래와 같이 수정합니다. 

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

class CalendarPage extends StatelessWidget {
  const CalendarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold( // Scaffold를 사용하여 페이지 구조를 만듭니다.
      appBar: AppBar(
        title: const Text('Calendar'), // 페이지 상단에 앱 바를 추가합니다.
      ),
      body: SfCalendar( // SfCalendar 위젯을 사용하여 캘린더를 표시합니다.
        view: CalendarView.month, // 월 뷰로 표시합니다. (다른 뷰로 변경 가능)
      ),
    );
  }
}

그리고 실행하면 다음과 같은 화면을 확인할 수 있습니다.

iphone, web에서도 깔끔하게 작동하네요.

syncfusion_flutter_calendar 는 여러 기능이 있지만 실제 데이터를 연동하면서 하나 하나 익혀가 보겠습니다.

다음은 프로젝트 페이지를 만들어 보겠습니다. 바이!!