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

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱 개발을 간편하게 할 수 있는 장점을 가지고 있습니다. 이번 글에서는 플러터를 사용하여 캘린더 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 카렌다 라이브러리 설치하기

캘린더 기능을 구현하기 위해서는 플러터의 카렌다 라이브러리를 설치해야 합니다. pubspec.yaml 파일에 다음 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.0.0

라이브러리를 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치합니다.

2. 캘린더 위젯 구현하기

이제 캘린더 위젯을 구현해보겠습니다. main.dart 파일을 열고 다음 코드를 작성합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calendar App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CalendarScreen(),
    );
  }
}

class CalendarScreen extends StatefulWidget {
  @override
  _CalendarScreenState createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  CalendarController _calendarController;

  @override
  void initState() {
    _calendarController = CalendarController();
    super.initState();
  }

  @override
  void dispose() {
    _calendarController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar'),
      ),
      body: TableCalendar(
        calendarController: _calendarController,
      ),
    );
  }
}

이 코드는 플러터 앱의 기본 구조를 설정하고, table_calendar 라이브러리를 사용하여 캘린더 위젯을 구현합니다. 또한, CalendarController를 사용하여 캘린더의 동작을 관리합니다.

3. 캘린더 스타일링하기

캘린더의 스타일을 수정하려면 TableCalendar 위젯의 calendarStyle 속성을 수정합니다. 예를 들어, 캘린더의 배경색을 변경하고 싶을 경우 다음과 같이 코드를 수정할 수 있습니다.

TableCalendar(
  calendarController: _calendarController,
  calendarStyle: CalendarStyle(
    todayColor: Colors.blueAccent,
    selectedColor: Colors.blue,
    weekendStyle: TextStyle(color: Colors.red),
  ),
),

위 코드에서는 todayColor 속성을 Colors.blueAccent로 설정하여 오늘 날짜의 배경색을 변경하고, selectedColor 속성을 Colors.blue로 설정하여 선택된 날짜의 배경색을 변경하였습니다. 또한, weekendStyle 속성을 사용하여 주말의 글자색을 빨간색으로 변경하였습니다.

4. 캘린더 이벤트 처리하기

캘린더에서 날짜를 선택하면 해당 날짜의 이벤트를 처리할 수 있습니다. TableCalendar 위젯의 onDaySelected 속성을 사용하여 선택된 날짜의 이벤트를 처리할 수 있습니다. 예를 들어, 선택된 날짜를 콘솔에 출력하는 코드는 다음과 같습니다.

TableCalendar(
  calendarController: _calendarController,
  onDaySelected: (date, events) {
    print('Selected date: $date');
  },
),

위 코드에서는 onDaySelected 속성에 함수를 정의하여 선택된 날짜와 해당 날짜의 이벤트를 출력하도록 설정하였습니다.

결론

위에서 설명한 방법을 참고하여 플러터에서 캘린더 기능을 구현할 수 있습니다. 플러터의 풍부한 기능과 친숙한 라이브러리를 활용하여 다양한 앱에서 캘린더 기능을 구현해보세요.

더 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.