[flutter] 플러터(Flutter)에서 캘린더 뷰 구현 방법은?

18 Dec 2023

flutter

플러터(Flutter) 앱에서 캘린더 뷰를 구현하는 방법에 대해 알아보겠습니다.

1. 캘린더 패키지 설치

먼저, 플러터 프로젝트에 사용할 캘린더 패키지를 설치해야 합니다. table_calendar나 syncfusion_flutter_calendar과 같은 캘린더 라이브러리를 pubspec.yaml 파일의 종속성에 추가합니다.

dependencies:
  table_calendar: ^2.3.3

이후 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

2. 캘린더 위젯 구현

다음으로, 캘린더를 표시할 위젯을 만들어야 합니다. 다음은 table_calendar 패키지를 이용하여 간단한 캘린더 뷰를 구현하는 예시입니다.

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

class CalendarView extends StatefulWidget {
  @override
  _CalendarViewState createState() => _CalendarViewState();
}

class _CalendarViewState extends State<CalendarView> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      firstDay: DateTime.utc(2020, 1, 1),
      lastDay: DateTime.utc(2030, 12, 31),
      focusedDay: _focusedDay,
      calendarFormat: _calendarFormat,
      selectedDayPredicate: (day) {
        return isSameDay(_selectedDay, day);
      },
      onDaySelected: (selectedDay, focusedDay) {
        setState(() {
          _selectedDay = selectedDay;
          _focusedDay = focusedDay;
        });
      },
      onFormatChanged: (format) {
        if (_calendarFormat != format) {
          setState(() {
            _calendarFormat = format;
          });
        }
      },
      onPageChanged: (focusedDay) {
        _focusedDay = focusedDay;
      },
    );
  }
}

3. 캘린더 뷰 확인

위와 같이 구현한 캘린더 뷰를 화면에 출력하고 확인할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('캘린더 뷰'),
        ),
        body: Center(
          child: CalendarView(),
        ),
      ),
    );
  }
}

위의 예시 코드를 참고하여 원하는 형태의 캘린더 뷰를 플러터 앱에 구현할 수 있습니다.

더 자세한 내용은 플러터(Flutter) 공식 문서나 각 캘린더 패키지의 문서를 참고하시기 바랍니다.

참고 자료:

플러터(Flutter) 공식 문서: https://flutter.dev/docs
table_calendar 패키지 문서: https://pub.dev/packages/table_calendar

위의 내용이 도움이 되었길 바라며, 추가 궁금한 점이 있으시면 언제든지 물어보세요!