[ Flutter ] TableCalendar TextMarker, 요일 색상 변경

각기존에 Calendar에 marker를 넣을려면 CalendarStyle에서 marker의 style을 직접 줘야했지만,

TextMarker의 경우에는 CalendarStyle에서 주는것이 아닌 markerBuilder를 활용해서 넣어주어야한다.

 

MarkerTextBuilder

기존의 CalendarBuildersdptj markerBuilder속성을 추가

calendarBuilders: CalendarBuilders(
          outsideBuilder: BuildOutSideDay,
          defaultBuilder: BuildDefaultDay,
          selectedBuilder: BuildSelectedDay,
          todayBuilder: BuildToday,
          markerBuilder: BuildTextMarker,
        ),

 

 

 

class Event {
  String title;
  Event(this.title);
}

Map<DateTime, List<Event>> events = {
  DateTime.utc(2024,6,13) : [ Event('3,000'), Event('5,000') ],
  DateTime.utc(2024,6,14) : [ Event('3,000'), Event('5,000') ],
};

 

Widget? BuildTextMarker(BuildContext context, DateTime date, List<Event> events) {
  if(events.isNotEmpty) {
    List<Event> eventList = events.cast<Event>();
    return Positioned(
      bottom: 1,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BuildEventText(eventList[0].title, Colors.blue),
          BuildEventText(eventList[1].title, Colors.red)
        ],
      ),
    );
  }
  return null;
}

BuildTextMarker의 파라미터는 BuildContext, DateTime, EventList, Holiday 이렇게 4개의 값을 받을 수 있으며,

Holiday는 아직 필요하지 않아 추가하지 않음.

 

events 값이 존재할때만 화면에 보여주고 그게 아니라면 null을 return 하여 아무것도 보여주지 않도록 했다.

List<Event> 안에 존재하는 값들을 직접 꺼낼려면 <Event> 타입으로 변환을 해주어야한다.

 

List안의 값을 BuildEventText를 따로 만들어서 값을 전달

Widget BuildEventText(String event, Color color) {
  return Text(
    event,
    maxLines: 1,
    style: TextStyle(
      color: color,
      fontSize: 10,
    ),
  );
}

 

Text를 두줄로 해서 보여주니 text가 날짜를 가리게 되어서 이것저것 방법을 찾다가

기존의 날짜는 Center에 존재했는데 calendarStyle에서 topCenter를 주어 상단 가운데에 위치하도록 수정

calendarStyle: CalendarStyle(
          cellAlignment: Alignment.topCenter,
          tablePadding: EdgeInsets.all(16.0),
          cellPadding: EdgeInsets.all(10.0)
        ),

---

Custom Holiday Color

요일표시에서 토요일과 일요일의 색깔 바꾸기

CalendarBuilders에서 dowBuilder추가

calendarBuilders: CalendarBuilders(
          dowBuilder: BuildDowDay,
          outsideBuilder: BuildOutSideDay,
          defaultBuilder: BuildDefaultDay,
          selectedBuilder: BuildSelectedDay,
          todayBuilder: BuildToday,
          markerBuilder: BuildTextMarker,
        ),

 

dowbuilder에서 dateTime이 토요일과 일요일인 경우에는 직접 커스텀을 적용

Widget? BuildDowDay(BuildContext context, DateTime date) {
  if (date.weekday == DateTime.saturday) {
    return Center(
      child: Text(
        '토',
        style: TextStyle(color: Colors.blue),
      ),
    )
    ;
  } else if (date.weekday == DateTime.sunday) {
    return Center(
      child: Text(
        '일',
        style: TextStyle(color: Colors.red),
      ),
    );
  }
  return null;
}

 

토요일과 일요일 날짜 색깔도 변경을 위해 outSideBuilder, defaultBuilder, selectedBuilder 에서도 토요일과 일요일에도 색깔을 넣기 위해 커스텀을 적용

outsideBuilder: BuildOutSideDay,
defaultBuilder: BuildDefaultDay,
selectedBuilder: BuildSelectedDay,

Widget BuildOutSideDay(BuildContext context, DateTime date, DateTime focusedDay) {
  Color dateColor = Colors.grey;
  if (date.weekday == DateTime.saturday) {
    dateColor = Colors.blueGrey;
  } else if (date.weekday == DateTime.sunday) {
    dateColor = Colors.redAccent;
  }
  return Container(
    child: Align(
      alignment: Alignment.topCenter,
      child: Text(
        '${date.day}',
        style: TextStyle(
          color: dateColor
        ),
      ),
    ),
  );
}