[flutter] 플러터(Flutter)로 캘린더 기능 구현하기

18 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 크로스플랫폼 모바일 앱 개발 프레임워크로, 강력한 UI 빌딩 기능을 제공합니다. 이번 포스트에서는 플러터를 사용하여 캘린더 기능을 구현하는 방법에 대해 알아보겠습니다.

캘린더 위젯 추가

플러터에서 캘린더를 사용하기 위해선 table_calendar 패키지를 이용할 수 있습니다. 먼저, pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  table_calendar: ^3.0.0

이후 패키지를 설치하고, 다음과 같이 캘린더 위젯을 추가합니다.

import 'package:table_calendar/table_calendar.dart';

class CalendarWidget extends StatefulWidget {
  @override
  _CalendarWidgetState createState() => _CalendarWidgetState();
}

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

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      firstDay: DateTime.utc(2021, 01, 01),
      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;
          });
        }
      },
      calendarStyle: CalendarStyle(
        selectedTextStyle: TextStyle(color: Colors.white),
        todayTextStyle: TextStyle(color: Colors.blue),
        markersColor: Colors.green,
      ),
      headerStyle: HeaderStyle(
        formatButtonVisible: false,
        titleCentered: true,
      ),
    );
  }
}

이제 CalendarWidget을 원하는 화면에 추가하여 캘린더를 화면에 띄우실 수 있습니다.

이벤트 처리 및 데이터 연동

캘린더에서 날짜를 선택하는 등의 이벤트 처리 및 데이터 표시를 위해선 onDaySelected 콜백을 이용하여 원하는 작업을 처리할 수 있습니다. 예를 들어, 날짜를 선택했을 때 해당 일정을 표시하거나 관련 데이터를 가져오는 등의 작업이 가능합니다.

onDaySelected: (selectedDay, focusedDay) {
  // 선택한 날짜에 대한 작업 처리
  // 예) 해당 날짜의 일정 가져오기, 상세 정보 표시 등
}

캘린더 스타일 및 커스터마이징

캘린더의 스타일이나 커스터마이징을 위해서는 calendarStyle 및 headerStyle을 사용하여 스타일을 변경하고 원하는 형태로 커스터마이징할 수 있습니다. 예를 들어, 선택된 날짜의 텍스트 색상을 바꾸거나, 헤더 스타일을 변경하는 등의 작업이 가능합니다.

이와 같이 플러터를 사용하여 캘린더 기능을 구현할 수 있습니다. 캘린더 위젯을 추가하고, 이벤트 처리와 스타일링을 통해 사용자 친화적이고 멋진 캘린더를 만들어보세요!

참고 자료

플러터(Flutter)로 캘린더 기능을 구현하는 방법에 대해 알아보았습니다. 원하는 형태로 커스터마이징하여 효과적인 캘린더를 만들어보세요.

목차

캘린더 위젯 추가

이벤트 처리 및 데이터 연동

캘린더 스타일 및 커스터마이징

참고 자료