Flutter syncfusion_flutter_calendar , table_calendar 비교

https://pub.dev/packages/syncfusion_flutter_calendar

syncfusion_flutter_calendar | Flutter Package

https://pub.dev/packages/table_calendar

table_calendar | Flutter Package

 

 

Flutter를 사용하면서 대표적인 캘린더 패키지 입니다. 

syncfusion_flutter_calendar는 라이센스가 있습니다. 조건부 무료입니다.

table_calendar는 라이센스가 없습니다. 무료입니다. 

 

 

두 패키지를 사용해본 결과... table_calendar 로 진행을 했습니다. 

가장 큰 이유로는 월별 달력을 사용 할 때 해당 달력의 이벤트를 불러오는 과정에서 큰 차이를 보이고 있습니다. 

 

syncfusion_flutter_calendar는 전체 날짜중에 해당 날짜에 해당 하는 이벤트를 불러오는 방법을 사용하고 있습니다. 

달력의 처음 시작 날짜, 달력의 마지막 날짜를 하나하나 계산하면서 이벤트를 불러온다는 이야기입니다. 

덕분에 해당 데이터를 불러오는 속도가 엄청 느립니다............

 

 

table_calendar는 이미 저장되어 있는 데이터에 해당 날짜만 등록하고 그 등록된 이벤트를 기반으로 maker 기능을 제공하고 있습니다. 

syncfusion_flutter_calendar는 다르게 데이터 받아오는 속도가 빠릅니다. 

 

 

그리고 syncfusion_flutter_calendar 보다 table_calendar가 커스텀 기능을 다양하게 제공해주고 있습니다. 

 

 

 

 

현재 사용한 테이블 캘린더 코드 입니다. 

 

eventLoader에 해당 날짜에 해당하는 데이터를 직접 입력해줍니다. 

그 eventLoader의 retrun 값 events 를 기반으로 makerbuilder 를 제작해주었습니다. 

 

기타 다른 builder는 달력 모양에 관련된 코드입니다. 

 

 

 TableCalendar(
                    daysOfWeekHeight: 30.h,
                    calendarStyle: CalendarStyle(isTodayHighlighted: false),
                    rowHeight: 80.h,
                    locale: 'ko_KR',
                    focusedDay: DateTime.now(),
                    firstDay: DateTime(2000),
                    lastDay: DateTime(2100),
                    calendarFormat: CalendarFormat.month,

                    headerStyle: HeaderStyle(
                      formatButtonVisible: false,
                      titleTextStyle: TextStyle(fontSize: 13.sp),
                      leftChevronIcon: Icon(Icons.chevron_left),
                      rightChevronIcon: Icon(Icons.chevron_right),
                    ),
                    startingDayOfWeek:
                        StartingDayOfWeek.sunday, // 한국의 경우 일요일부터 시작
                    daysOfWeekStyle: DaysOfWeekStyle(
                      weekendStyle: TextStyle(color: Colors.red), // 주말은 빨간색으로
                    ),

                    onDaySelected: (selectedDay, focusedDay) {
                      showBottomSheet(context, selectedDay, controller);
                    },
                    eventLoader: (date) {
                      double dailyIncome =
                          controller.calculateDailyIncomeForDate(date);
                      double dailyExpense =
                          controller.calculateDailyExpenseForDate(date);
                      double dailyBalance =
                          controller.calculateDailyBalanceForDate(date);

                      List<MyCalendarEvent> events = [
                        if (dailyIncome > 0)
                          MyCalendarEvent(
                            date,
                            controller
                                .formatNumberWithCommasClander(dailyIncome),
                            Colors.green,
                          ),
                        if (dailyExpense > 0)
                          MyCalendarEvent(
                            date,
                            controller
                                .formatNumberWithCommasClander(dailyExpense),
                            Colors.red,
                          ),
                        if (dailyBalance > 0)
                          MyCalendarEvent(
                            date,
                            controller
                                .formatNumberWithCommasClander(dailyBalance),
                            Colors.black87,
                          ),
                      ];

                      controller.dailyEventMap[date] = events;

                      return events;
                    },

                    calendarBuilders: CalendarBuilders(
                      markerBuilder: (context, day, events) {
                        if (controller.dailyEventMap.containsKey(day)) {
                          List<MyCalendarEvent> dailyEvents =
                              controller.dailyEventMap[day] ?? [];

                          return Padding(
                            padding: const EdgeInsets.only(top: 10),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: dailyEvents
                                  .map((event) => Text(
                                        event.description,
                                        style: TextStyle(
                                            fontSize: 8, color: event.color),
                                        overflow: TextOverflow.ellipsis,
                                      ))
                                  .toList(),
                            ),
                          );
                        }
                        return SizedBox.shrink();
                      },
                      outsideBuilder: (context, day, focusedDay) {
                        final text = '${day.day}'; // 날짜 텍스트

                        // 현재 월과 비교하여 같은 월인 경우에만 텍스트를 표시
                        if (day.month == focusedDay.month) {
                          return Container(
                            margin: EdgeInsets.all(4), // 텍스트의 위쪽 마진 조절
                            alignment: Alignment.topCenter, // 텍스트를 위쪽으로 정렬
                            child: Text(
                              text,
                              style: TextStyle(
                                fontSize: 10, // 텍스트 크기 조절
                                color: Colors.black,
                              ),
                            ),
                          );
                        } else {
                          return SizedBox.shrink(); // 다른 월의 날짜는 표시하지 않음
                        }
                      },
                      defaultBuilder: (context, day, focusedDay) {
                        final text = '${day.day}'; // 날짜 텍스트

                        // 현재 월과 비교하여 같은 월인 경우에만 텍스트를 표시
                        if (day.month == focusedDay.month) {
                          return Container(
                            // 텍스트의 위쪽 마진 조절
                            alignment: Alignment.topCenter, // 텍스트를 위쪽으로 정렬
                            child: Text(
                              text,
                              style: TextStyle(
                                fontSize: 10, // 텍스트 크기 조절
                                color: Colors.black,
                              ),
                            ),
                          );
                        } else {
                          return SizedBox.shrink(); // 다른 월의 날짜는 표시하지 않음
                        }
                      },
                    ),
                  ),