Flutter -Sf캘린더 패키지(유료..)

https://help.syncfusion.com/flutter/calendar/overview

About Flutter Event Calendar widget | Syncfusion | Scheduler

 

위 패키지를 사용했습니다. 

 

이 패키지를 이용해서 무엇을 만드려고 했는지, 어떤 문제를 겪었는지 정리했습니다. 

 

 

일별 기록되어 있는 가계부의 데이터를 달력에 보여주기

 

 

sf캘린더를 사용한 이유는 커스텀화가 잘 되어 있다고 느꼈기 때문입니다. 

덕분에 사용방법이 쪼금 복잡하지만서도 익숙해지면 간단합니다. 

 

패키지를 추가하고 

dependencies:

syncfusion_flutter_calendar: ^xx.x.xx

 

요런식으로 코드를 짜면 월별 달력이 보여집니다. 

 

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfCalendar(
    view: CalendarView.month,
  ));
}

 

 

 

아래 월별 달력을 구현한 코드는 다음과 같습니다. 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:money_tracker_test/controller/home/money_tracker_controller.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

class MoneyCalendarPage extends GetView<MoneyTrackerController> {
  const MoneyCalendarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() {
        // Obx를 사용하여 데이터 변경 감지
        if (controller.isLoading.isTrue) {
          return Center(child: CircularProgressIndicator());
        } else {
          // 데이터 로드 완료 시 SfCalendar를 보여줍니다.
          List<Appointment> appointments = controller.getCalendarEvents();
          return SfCalendar(
            view: CalendarView.month,
            dataSource: MeetingDataSource(appointments),
            monthViewSettings: MonthViewSettings(
              showAgenda: true,
            ),
          );
        }
      }),
    );
  }
}

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Appointment> appointments) {
    this.appointments = appointments;
  }
}

 

 

 

위 부분에서 문제를 겪었었는데 일별 가계부에 있는 페이지의 데이터를 월별로 받아오는 과정에서 저는 탭page를 하나 만들었으니 달력 부분 GetxController를 하나 더 만들었습니다. 일별 데이터를 가져오는 과정에 한 단계가 더 생겼으니 여러 문제가 생겼습니다. 

 

- 데이터 즉각 동기화 안됨

- 매출의합, 지출의 합 딱 2개의 데이터만 원하는데 일별 데이터를 다 가져옴 

 

 

해결 방법은 기존 일별 가계부에서 사용한 Getxcontroller를 달력 페이지에서도 사용하게 했습니다. 

즉 하나의 Getxcontroller 로 일별 가계부, 달력 가계부 페이지를 붙였습니다. 

 

상태관리를 쓰는 이유가 무엇인지 다시금 깨닫는 시간이었습니다. 

 데이터 덩어리를 만들어 여러 페이지에서 즉각적으로 사용할 수 있게끔 하는 것이 상태관리의 핵심입니다. 

 

달력 내부에 매출의 합,지출의 합을 보여줄까도 했지만 숫자가 많아지면 지저분하게 보이게 되어서 

저렇게 밑으로 보여지게 했습니다. 

 

복잡복잡한 달력의 기능을 이리 쉽게 구현 할 수 있다는 것에 감사합니다...

 

작업을 다 끝내니.... 라이센스가 잇는 패키지였습니다. 

하 열받습니다. 

Table 캘린더 패키지를 쓰러 가야겠습니다 껄껄