TableCalender 질문입니다..!

[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

Table Calendar 소개

작성

692

수정됨

사진 올린것같이 state 에다 selectedDay값을 받고 onDaySelected함수에 setState를 실행시켰습니다.

다하고 나서 에뮬레이터를 확인해보니 선택한 날짜에 동그라미가 안생기더라구요.. 그래서 print를 이용하여 this.selectedDay 가 파라미터의 selectedDay가 같은 지 확인을 해봤더니 다른 값으로 false가 나옵니다.

onDaySelected란 함수가 달력의 날짜를 선택하면 selectedDay와 focusedDay의 값이 선택한 날짜가 되는것 아닌가요?? 문제의 원인이 뭔지 이해가 안됩니다 ㅠ

확인해보니 selectedDay의 값이 바뀌지 않고 계속 null 인것으로 나옵니다.ㅜ

flutter 클론코딩 클론코딩 Flutter

답변 1

코드팩토리

지식공유자

안녕하세요!

현재 코드만으로는 원인파악이 어렵습니다.

전체 코드를 보여주시면 문제파악을 좀 더 쉽게 할 수 있을 것 같습니다.

감사합니다!

wjdgus003

질문자

import 'package:calender/component/calender.dart';
import 'package:calender/component/schedule_card.dart';
import 'package:calender/component/today_banner.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTime selectedDay =
      DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day);
  DateTime focusedDay = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Calender(
              onDaySelected: onDaySelected,
              selectedDay: selectedDay,
              focusedDay: focusedDay,
            ),
            SizedBox(
              height: 8,
            ),
            TodayBanner(selectedDay: selectedDay, scheduleCount: 3),
            ScheduleCard(
                color: Colors.black,
                content: 'content',
                endTime: 10,
                startTime: 8)
          ],
        ),
      ),
    );
  }

  void onDaySelected(DateTime selectedDay, DateTime focusedDay) {
    setState(() {
      this.selectedDay == selectedDay;
      this.focusedDay == selectedDay;
    });
  }
}

wjdgus003

질문자

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

import '../const/colors.dart';

class Calender extends StatelessWidget {
  final OnDaySelected onDaySelected;
  final DateTime selectedDay;
  final DateTime focusedDay;

  const Calender(
      {required this.onDaySelected,
      required this.selectedDay,
      required this.focusedDay,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final defaultBoxDeco = BoxDecoration(
        //테두리 둥글게 깎기
        borderRadius: BorderRadius.circular(6),
        color: Colors.grey[200]);

    final defaultTextStyle =
        TextStyle(color: Colors.grey[600], fontWeight: FontWeight.w700);

    return TableCalendar(
      locale: 'ko_KR',
      focusedDay: this.focusedDay,
      firstDay: DateTime(1800),
      lastDay: DateTime(3000),
      headerStyle: HeaderStyle(
          formatButtonVisible: false,
          titleCentered: true,
          titleTextStyle:
              TextStyle(fontWeight: FontWeight.w700, fontSize: 16.0)),
      calendarStyle: CalendarStyle(
          isTodayHighlighted: false,
          //날짜의 컨테이너의 데코레이션션
          defaultDecoration: BoxDecoration(
              //테두리 둥글게 깎기
              borderRadius: BorderRadius.circular(6),
              color: Colors.grey[200]),
          weekendDecoration: defaultBoxDeco,
          selectedDecoration: defaultBoxDeco,
          outsideDecoration: BoxDecoration(shape: BoxShape.rectangle),
          defaultTextStyle: defaultTextStyle,
          weekendTextStyle: defaultTextStyle,
          selectedTextStyle: defaultTextStyle.copyWith(color: PrimayColor)),
      onDaySelected: this.onDaySelected,
      selectedDayPredicate: (DateTime date) {
        if (this.selectedDay == null) {
          return false;
        }

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

wjdgus003

질문자

homeScreen과 calender 코드입니다..! 영상을 보면서 다음내용으로 조금 진행한 상태입니다

코드팩토리

지식공유자

현재 상태에서 특정 날짜를 누르면 this.selectedDay가 null로 표현된다는 말슴이신가요?

코드상에서는 문제가 없어보입니다.

wjdgus003

질문자

네! 날짜를 눌러도 this.selectedDay가 바뀌지 않습니다!

혹시 플러그인 버전을 제일 최신 버전으로 사용하고있는데 그게 문제가 될 수 있을까요?

코드팩토리