위 내용은 코드팩토리 강의를 정리한 내용입니다.

캘린더 스케쥴러(1)

패키지 불러오기

table_calendar: ^3.0.8

• 캘린더 라이브러리

intl: ^0.17.0

• 다국어지원 라이브러리

drift

• sql과 연결해주는 라이브러리

dependecy_overrides:
path: ^1.8.1

• 버전을 맞춰주는 역할

UI 만들기

1. 달력 화면 만들기

위 같은, 화면을 만들기 위해서는 캘린더라이브러리를 불러와야 한다. 많이 사용할 수 도있으니, 컴포넌트화를 통해 관리하자.

import 'dart:html';

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

class Calendar extends StatefulWidget {
  const Calendar({super.key});

  @override
  State<Calendar> createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {
  DateTime? selectedDay;

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      focusedDay: DateTime.now(),
      firstDay: DateTime(1800),
      lastDay: DateTime(3000),
      headerStyle: HeaderStyle(
          formatButtonVisible: false,
          titleCentered: true,
          titleTextStyle: TextStyle(fontWeight: FontWeight.w700)),
      onDaySelected: (DateTime selectedDay, DateTime focusedDay) {
        setState(() {
          this.selectedDay = selectedDay;
        });
      },
      selectedDayPredicate: (DateTime date) {
        if (selectedDay == null) {
          return false;
        }

        return date.year == selectedDay!.year &&
            date.month == selectedDay!.month &&
            date.day == selectedDay!.day;
      },
    );
  }
}

TableCalendar 클래스를 들어가보면 많은 생성자가 있다.

이 중에서 무엇을 쓸지는 직접 확인을 해가며 필요한 부분을 선택해 골라야 한다. 필요한 부분을 이용해 만든 화면은 아래와 같다.