[flutter] Flutter Riverpod에서 캘린더 연동하기

14 Dec 2023

flutter

웹 및 앱을 개발하다보면 일정을 관리하는 기능이 필요한 경우가 많습니다. Flutter 앱에서 쉽게 일정을 추가하고 관리할 수 있도록 캘린더를 연동하는 방법을 알아보겠습니다. 또한, Riverpod을 사용하여 상태 관리를 할 것입니다.

준비물

Flutter 프로젝트가 설치된 개발 환경
Riverpod 패키지
table_calendar 패키지

패키지 추가

pubspec.yaml 파일에 다음과 같이 riverpod와 table_calendar 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3
  table_calendar: ^2.3.3

그리고 패키지를 설치합니다.

flutter pub get

캘린더 위젯 추가

캘린더를 표시할 화면에 TableCalendar 위젯을 추가합니다.

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

final selectedDateProvider = StateProvider<DateTime>((ref) => DateTime.now());

class CalendarScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final selectedDate = watch(selectedDateProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar'),
      ),
      body: TableCalendar(
        selectedDayPredicate: (day) {
          return isSameDay(selectedDate, day);
        },
        onDaySelected: (selectedDay, focusedDay) {
          context.read(selectedDateProvider).state = selectedDay;
        },
      ),
    );
  }
}

일정 추가

캘린더에서 날짜를 선택하고, 해당 날짜에 일정을 추가하는 기능을 추가할 수 있습니다.

class EventScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final selectedDate = watch(selectedDateProvider).state;

    return Scaffold(
      appBar: AppBar(
        title: Text('Add Event'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Add event for the selected date
            // Implement your logic here
          },
          child: Text('Add Event on ${selectedDate.toLocal()}'),
        ),
      ),
    );
  }
}

위와 같이 Riverpod을 통해 캘린더와 일정을 관리하면, 상태 관리가 간편하고 유연한 방식으로 앱을 구현할 수 있습니다. 이를 통해 사용자가 쉽게 일정을 추가하고 관리할 수 있는 기능을 제공할 수 있습니다.

결론

Flutter에서 Riverpod을 사용하여 캘린더를 연동하고 일정을 추가하는 방법을 알아보았습니다. 이를 통해 효율적으로 상태를 관리하고, 사용자에게 편리한 일정 관리 기능을 제공할 수 있습니다. Riverpod과 캘린더를 활용하여 더 많은 기능을 추가해보세요!