이 전(Step 2nd) 글에서 기본 달력을 띄우는데 성공했으니 이번에는 달력을 커스터마이징 해보겠습니다.
TableCalendar 커스터마이징
TableCalendar 위젯의 스타일은 크게 두 가지로 나눌 수 있습니다.
화살표와 년도 및 월이 보이는 최상단은 headerStyle 매개변수를 통해 지정할 수 있습니다.
날짜들이 배열돼 있는 아랫부분은 calendarStyle 매개변수를 사용해 지정할 수 있습니다.
lib/component/main_calendar.dart
import 'package:flutter/material.dart';
import 'package:planner_example/const/colors.dart';
import 'package:table_calendar/table_calendar.dart';
class MainCalendar extends StatelessWidget {
const MainCalendar({super.key});
@override
Widget build(BuildContext context) {
return TableCalendar(
focusedDay: DateTime.now(), // 현재 날짜
firstDay: DateTime.now().subtract(const Duration(days: 3650)), // 첫 번째 날짜
lastDay: DateTime.now().add(const Duration(days: 3650)), // 마지막 날짜
headerStyle: HeaderStyle(
// 헤더 스타일 설정
titleCentered: true, // 제목을 중앙에 배치
formatButtonVisible: false, // 형식 버튼 숨김
titleTextStyle: const TextStyle(
// 제목 텍스트 스타일 설정
fontSize: 16.0,
fontWeight: FontWeight.w700,
),
),
calendarStyle: CalendarStyle(
// 달력 스타일 설정
defaultDecoration: BoxDecoration(
// 기본 날짜 장식
color: lightGrayColor,
borderRadius: BorderRadius.circular(6.0),
),
weekendDecoration: BoxDecoration(
// 주말 날짜 장식
color: lightGrayColor,
borderRadius: BorderRadius.circular(6.0),
),
todayDecoration: BoxDecoration(
// 오늘 날짜 장식
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(6.0),
),
selectedDecoration: BoxDecoration(
// 선택된 날짜 장식
borderRadius: BorderRadius.circular(6.0),
border: Border.all(
color: primaryColor, // 선택된 날짜 테두리 색상
width: 1.0,
),
),
defaultTextStyle: TextStyle(
// 기본 텍스트 스타일
fontWeight: FontWeight.w600,
color: darkGrayColor,
),
),
selectedDayPredicate: (DateTime day) {
final now = DateTime.now();
return DateTime(day.year, day.month, day.day) ==
DateTime(now.year, now.month, now.day);
},
onDaySelected: (DateTime selectedDay, DateTime focusedDay) {
// Handle day selection
},
onPageChanged: (focusedDay) {
// Handle page change
},
rangeSelectionMode: RangeSelectionMode.toggledOff,
onRangeSelected: (start, end, focusedDay) {
// Handle range selection
},
);
}
}
헤더 스타일 설정
titleCentered 매개변수에 true를 입력하면 연, 월을 보여주는 글자가 가운데 정렬됩니다.
formatButtonVisible 매개변수는 날짜들을 매월 1주일씩 보여줄지 2주일씩 보여줄지 전체를 다 보여줄지 선택하는 버튼의 존재 여부에 대한 지정입니다.
titleStyle 매개변수는 연, 월을 보여주는 글자의 스타일을 변경합니다.
달력 스타일 설정
TableCalendar는 날짜 칸을 하나하나 커스터마이징 할 수 있도록 구현되었습니다.
defaultDecoration은 날짜 칸의 기본 BoxDecoration을 설정할 수 있는 매개변수입니다. weekendDecoration은 주말을 selectedDecoration은 선택된 날짜의 BoxDecoration을 설정하는 매개변수입니다.
defaultTextStyle 및 weekendTextStyle, selectedTextStyle 또한 각각 기본, 주말, 선택된 날짜의 글꼴을 설정하는 매개변수입니다.
실행화면
