[Flutter] TableCalendar ③ - 달력 꾸미기 (HeaderStyle)

TableCalendar ① - 간단한 달력 구현  https://dalgoodori.tistory.com/14

TableCalendar ② - 달력 언어 설정 (locale)  https://dalgoodori.tistory.com/15

TableCalendar ③ - 달력 꾸미기 (HeaderStyle) 

TableCalendar ④ - 달력 꾸미기 (CalendarStyle)  https://dalgoodori.tistory.com/17

TableCalendar ⑤ - 유용한 기능들  https://dalgoodori.tistory.com/18

 

 

TableCalendar 에서 헤더 부분은 아래 사진 빨간 네모 부분이며 HeaderStyle 을 통하여 꾸밀 수 있습니다.

① header  ② leftChevron  ③ title  ④ formatButton  ⑤ rightChevron

 

• HeaderStyle() 에 들어갈 수 있는 인자는 다음과 같습니다.

  const HeaderStyle({
    // formatButton
    this.formatButtonVisible = true, // formatButton 노출 여부
    this.formatButtonShowsNext = true, // formatButton 글자 제어 여부
    this.formatButtonTextStyle = const TextStyle(fontSize: 14.0), // formatButton 글자 꾸미기 
    this.formatButtonDecoration = const BoxDecoration(
      border: const Border.fromBorderSide(BorderSide()),
      borderRadius: const BorderRadius.all(Radius.circular(12.0)),
    ), // formatButton 꾸미기 
    this.formatButtonPadding =
        const EdgeInsets.symmetric(horizontal: 10.0, vertical: 4.0), // formatButton Padding 조절
    
    // title
    this.titleCentered = false, // title 중앙 정렬 여부
    this.titleTextFormatter, // title 의 날짜 형태 (ex : titleTextFormatter: (date, locale) => DateFormat.yM(locale).format(date),)
    this.titleTextStyle = const TextStyle(fontSize: 17.0), // title 글자 꾸미기
   	
    // leftChevron
    this.leftChevronPadding = const EdgeInsets.all(12.0), // leftChevron Padding 조절
    this.leftChevronMargin = const EdgeInsets.symmetric(horizontal: 8.0), // leftChevron Margin 조절
    this.leftChevronIcon = const Icon(Icons.chevron_left), // leftChevron Icon 정의
    this.leftChevronVisible = true, // leftChevron 노출 여부
    
    // rightChevron
    this.rightChevronPadding = const EdgeInsets.all(12.0), // rightChevron Padding 조절
    this.rightChevronMargin = const EdgeInsets.symmetric(horizontal: 8.0), // rightChevron Margin 조절
    this.rightChevronIcon = const Icon(Icons.chevron_right), // rightChevron Icon 정의
    this.rightChevronVisible = true, // rightChevron 노출 여부
    
    // header
    this.headerMargin = const EdgeInsets.all(0.0), // header Margin 조절
    this.headerPadding = const EdgeInsets.symmetric(vertical: 8.0), // headar Padding 조절
    this.decoration = const BoxDecoration(), // header 꾸미기
  });

예시

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

class TableCalendarScreen extends StatelessWidget {
  const TableCalendarScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: TableCalendar(
        locale: 'ko_KR',
        firstDay: DateTime.utc(2021, 10, 16),
        lastDay: DateTime.utc(2030, 3, 14),
        focusedDay: DateTime.now(),
        
        // 추가
        headerStyle: HeaderStyle(
          titleCentered: true,
          titleTextFormatter: (date, locale) =>
              DateFormat.yMMMMd(locale).format(date),
          formatButtonVisible: false,
          titleTextStyle: const TextStyle(
            fontSize: 20.0,
            color: Colors.blue,
          ),
          headerPadding: const EdgeInsets.symmetric(vertical: 4.0),
          leftChevronIcon: const Icon(
            Icons.arrow_left,
            size: 40.0,
          ),
          rightChevronIcon: const Icon(
            Icons.arrow_right,
            size: 40.0,
          ),
        ),
      ),
    );
  }
}