[flutter] - Flutter에서의 캘린더 및 일정 관리 기능 구현 방법

Flutter는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 앱을 개발할 수 있게 해줍니다. 오늘은 Flutter를 사용하여 캘린더 및 일정 관리 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 캘린더 UI 생성하기

먼저, 캘린더 화면을 만들어야 합니다. Flutter에서는 TableCalendar 패키지를 사용하여 캘린더 UI를 생성할 수 있습니다. 이 패키지를 사용하려면 pubspec.yaml 파일에 의존성을 추가해야 합니다.

dependencies:
  table_calendar: ^2.3.3

pubspec.yaml 파일에 위와 같이 의존성을 추가한 뒤, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

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

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

class _CalendarScreenState extends State<CalendarScreen> {
  CalendarController _calendarController;

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

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

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

위의 예제 코드는 TableCalendar 위젯을 사용하여 캘린더 UI를 생성하는 방법을 보여줍니다. CalendarController를 사용하여 캘린더를 제어할 수 있습니다.

2. 일정 추가 및 편집 기능 구현하기

캘린더 화면에 일정 추가 및 편집 기능을 구현해보겠습니다. 일정 추가 버튼을 누르면 다이얼로그가 나타나고, 사용자는 일정의 제목, 날짜, 시간 등을 입력할 수 있습니다.

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

class _CalendarScreenState extends State<CalendarScreen> {
  CalendarController _calendarController;
  TextEditingController _eventTitleController;

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

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

  void _showAddEventDialog(DateTime date) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('일정 추가'),
          content: TextField(
            controller: _eventTitleController,
            decoration: InputDecoration(hintText: '일정 제목'),
          ),
          actions: [
            FlatButton(
              child: Text('취소'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            FlatButton(
              child: Text('추가'),
              onPressed: () {
                // 일정을 추가하는 코드 작성
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

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

위의 예제 코드에서 _showAddEventDialog 함수는 다이얼로그를 출력하는 역할을 합니다. 다이얼로그에서 일정 추가 버튼을 누르면, 해당 일자와 입력한 일정 제목을 저장하는 코드를 작성해야합니다.

3. 일정 보기 기능 구현하기

일정을 추가하고 편집한 후에는 해당 일정을 캘린더에서 확인할 수 있어야 합니다. 그리고 특정 일자를 선택하면 그 날의 일정을 모아서 볼 수 있는 화면으로 이동해야 합니다.

이 기능을 구현하기 위해 Flutter에서는 라우팅 기능을 제공합니다. 다음은 일정을 추가하고 편집한 후 EventScreen 화면으로 이동하는 예제 코드입니다.

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

class _CalendarScreenState extends State<CalendarScreen> {
  CalendarController _calendarController;
  TextEditingController _eventTitleController;

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

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

  void _showAddEventDialog(DateTime date) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('일정 추가'),
          content: TextField(
            controller: _eventTitleController,
            decoration: InputDecoration(hintText: '일정 제목'),
          ),
          actions: [
            FlatButton(
              child: Text('취소'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            FlatButton(
              child: Text('추가'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => EventScreen(
                      date: date,
                      title: _eventTitleController.text,
                    ),
                  ),
                );
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

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

EventScreen 화면에서는 선택한 일자의 일정을 표시하도록 구현하면 됩니다.

위의 예제 코드에서는 Flutter에서 제공하는 기능을 사용하여 캘린더 및 일정 관리 기능을 구현하는 방법을 설명했습니다. 이를 참고하여 자신만의 캘린더 및 일정 관리 앱을 개발해보세요!