[Flutter] TableCalendar 달력 구현

 

https://pub.dev/documentation/table_calendar/latest/

table_calendar - Dart API docs

---

Installation

pubspec.yaml 파일에 dependencies 추가

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.1.1

Usage

firstDay : 시작 날짜

lastDay : 마지막 날짜

focusedDay : 현재 날짜

@override
  Widget build(BuildContext context) {
    return Container(
      child: TableCalendar(
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2030, 12, 1),
        focusedDay: DateTime.now(),
      ),
    );
  }

firstDay, lastDay의 기간 선택은 자유지만 기간이 크면 메모리 및 성능 문제가 있을 수도 있기에 적당한 기간을 선택

반응형

Setup Locale - Kor

TableCalendar에는 한글 지원이 안되어서 dependencies에 추가

dependencies:
  flutter:
    sdk: flutter
  table_calendar: ^3.1.1
  intl: ^0.19.0

 

intl library

국제화 및 지역화 기능을 제공하는 라이브러리로 날짜, 시간, 숫자 등의 형식을 맞게 표시할 수 있도록 기능을 지원 

 

• 날짜 및 시간 형식 지정: DateFormat 클래스를 사용하여 날짜 및 시간을 특정 형식으로 포맷할 수 있다 예를 들어, 날짜를 "년-월-일" 형식으로 표시하거나 시간을 "시:분:초" 형식으로 표시 가능
• 숫자 형식 지정: NumberFormat 클래스를 사용하여 숫자를 로컬에 맞게 포맷할 수 있다. 예를 들어, 통화 형식으로 숫자를 표시하거나 숫자를 퍼센트 형식으로 변환 가능
• 다국어 지원: Intl 클래스를 사용하여 다국어 지원 기능을 구현할 수 있다. 애플리케이션에서 다국어 문자열을 관리하고, 사용자의 로컬 설정에 따라 올바른 언어로 문자열을 표시 가능

 

main.dart에서 runApp 전에 initalizeDateFormatting() 추가

void main() async {
  #import 'package:intl/date_symbol_data_local.dart';
  await initializeDateFormatting();
  runApp(const MyApp());
}

TableCalendar에서 local: 'ko_kr' 을 추가

@override
  Widget build(BuildContext context) {
    return Container(
      child: TableCalendar(
        locale: 'ko_KR',
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2030, 12, 1),
        focusedDay: DateTime.now(),
      ),
    );
  }