[flutter] 플러터에서의 캘린더 및 일정 처리 방법

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 캘린더 및 일정 처리 기능을 구현하는 것이 가능합니다. 이번 포스트에서는 플러터에서 캘린더 및 일정 처리를 위한 방법을 알아보겠습니다.

1. 캘린더 UI 구현하기

캘린더 UI를 구현하기 위해서는 먼저 플러터에서 제공하는 table_calendar 패키지를 사용할 수 있습니다. 이 패키지는 캘린더의 UI를 구성하고, 다양한 이벤트들을 표시하고 관리하는 기능을 제공합니다.

다음의 단계를 따라서 table_calendar 패키지를 사용하여 캘린더 UI를 구현해 보세요:

pubspec.yaml 파일에서 table_calendar 패키지를 추가합니다:

dependencies:
  table_calendar: ^2.3.3

Flutter 앱의 main.dart 파일에서 table_calendar 패키지를 import합니다:

import 'package:table_calendar/table_calendar.dart';

위젯 트리에서 TableCalendar 위젯을 추가하여 캘린더 UI를 화면에 표시합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calendar',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Calendar'),
        ),
        body: Column(
          children: <Widget>[
            TableCalendar(
              // 캘린더 설정 및 이벤트 관리 등의 설정을 추가할 수 있습니다.
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 추가할 수 있는 설정은 다양하지만, 캘린더의 초기 날짜, 표시할 이벤트 목록, 특정 날짜 선택시 실행되는 콜백 함수 등을 추가할 수 있습니다.

2. 일정 관리하기

캘린더 UI를 구현했다면, 이제 일정을 관리하는 기능을 추가해보겠습니다. 플러터에서는 SQLite, Firebase 등 다양한 방법으로 일정 데이터를 관리할 수 있습니다. 이번 포스트에서는 SQLite를 사용하여 일정을 저장하고 불러오는 방법을 알아보겠습니다.

sqflite 패키지를 사용하여 SQLite를 구현하기 위해 다음 패키지를 pubspec.yaml 파일에 추가합니다:

dependencies:
  sqflite: ^3.0.0
  path_provider: ^2.0.2

SQLite 데이터베이스에 접근하기 위한 헬퍼 클래스를 작성합니다:

import 'dart:async';
import 'dart:io';

import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite/sqflite.dart';

class DatabaseHelper {
  static final _databaseName = "mydatabase.db";
  static final _databaseVersion = 1;

  static final table = 'todos';

  static final columnId = '_id';
  static final columnTitle = 'title';
  static final columnDate = 'date';

  static String get databaseName => _databaseName;

  static Future<Database> initializeDatabase() async {
    Directory directory = await getApplicationDocumentsDirectory();
    String path = join(directory.path, _databaseName);
    return await openDatabase(
      path,
      version: _databaseVersion,
      onCreate: _onCreate,
    );
  }

  static Future<void> _onCreate(Database db, int version) async {
    await db.execute('''
          CREATE TABLE $table (
            $columnId INTEGER PRIMARY KEY AUTOINCREMENT,
            $columnTitle TEXT NOT NULL,
            $columnDate TEXT NOT NULL
          )
      ''');
  }
}

일정을 추가하고 가져올 수 있는 기능을 DatabaseHelper 클래스에 추가합니다:

static Future<int> insertEvent(Event event) async {
  Database db = await initializeDatabase();
  return await db.insert(table, event.toMap());
}

static Future<List<Event>> getEvents() async {
  Database db = await initializeDatabase();
  List<Map<String, dynamic>> maps = await db.query(table);
  return List.generate(maps.length, (i) {
    return Event(
      id: maps[i][columnId],
      title: maps[i][columnTitle],
      date: maps[i][columnDate],
    );
  });
}

위 코드는 Event 모델 객체를 SQLite 데이터베이스에 저장하고 불러오는 기능을 제공합니다. Event 객체는 일정의 제목과 날짜 정보를 가지고 있습니다.

일정을 추가하고 가져오는 기능을 활용하여 TableCalendar 위젯에 일정을 표시하도록 수정합니다:

class MyApp extends StatelessWidget {

  ...

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calendar',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Calendar'),
        ),
        body: Column(
          children: <Widget>[
            TableCalendar(
              events: _events, // 일정 목록을 포함하고 있는 맵
              onDaySelected: (date, events) {
                // 특정 날짜가 선택되었을 때 실행되는 콜백 함수
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 _events는 Map<DateTime, List<dynamic>> 형태로 일정 목록을 가지고 있습니다. onDaySelected 콜백 함수는 특정 날짜가 선택되었을 때 실행되는 함수로, 해당 날짜의 일정 목록을 가져와서 표시할 수 있습니다.

3. 결론

이번 포스트에서는 플러터에서 캘린더 및 일정 처리를 위한 방법을 알아보았습니다. table_calendar 패키지를 사용하여 캘린더 UI를 구현하고, SQLite를 사용하여 일정을 저장하고 불러오는 방법을 학습했습니다. 이를 기반으로 일정 관리 앱 등 다양한 앱을 개발할 수 있습니다.

더 많은 기능을 구현하거나 문제를 해결하기 위해서는 플러터 공식 문서나 개발 커뮤니티를 참고하는 것이 좋습니다.