Flutter 개발일지 day 2

달력 구성

최초로 repository를 생성하고 기본적으로 표시될 자료들을 구성했다. 아무래도 날짜를 다루다보니까, 매번 날짜를 int 3개로 이어붙이긴 힘들 것 같아서 찾아봤는데 Datetime이라는 좋은 자료형이 있었다.

var now = DateTime.now();
var nowMonth = now.month;

요런 식으로 써먹을 수 있다.

또 우리는 월별 화면과 동시에 주차별 화면도 구현할 예정이므로 몇 주차인지 계산할 수 있는 방법이 필요했다. 그래서 주차 계산 함수도 만들었다.

int dayCal(int year, int month, int day){
  final firstDay = DateTime(year, month, 1);
  var firstDayVal = firstDay.weekday;
  int nthWeek = ((day+firstDayVal-2) ~/ 7) + 1;
  return nthWeek;
}

개발일지를 조금 나중에 쓰는지라 어떻게 저리 게산했는지는 잘 기억이 안난다;; firstDay.weekday는 그 달 1일의 요일을 숫자로 리턴한다. 예를 들어 1월 1일이 월요일이면 1을, 화요일이면 2를 리턴하는 그런 방식이다. nthweek 변수는 특정 일자(day)를 적절히 가공해서 그 일자가 속한 주차 몇 주차인지를 가르키는 변수이다.

레이아웃 구성

달력 화면을 처음 만들기 시작하면서, 먼저 항상 고정되어 있는 월~일을 균형있게 표기하자고 정했다. 그래서 expanded를 통해 알아서 이쁜 비율로 들어가게 했다.

Row(
    children: const [
        Expanded(child: Text("월", textAlign: TextAlign.center,)),
        Expanded(child: Text("화", textAlign: TextAlign.center,)),
        Expanded(child: Text("수", textAlign: TextAlign.center,)),
        Expanded(child: Text("목", textAlign: TextAlign.center,)),
        Expanded(child: Text("금", textAlign: TextAlign.center,)),
        Expanded(child: Text("토", textAlign: TextAlign.center,)),
        Expanded(child: Text("일", textAlign: TextAlign.center,)),
    ],
), //요일 표시 -> 항상 고정

Row widget 안에서 나열된 expanded들이기 때문에 자연스럽게 좌우로 예쁜 비율로 나누어 꽉 차지한다.

배운점

1. 시간을 일일히 넣어야할 줄 알았는데 생각보다 기본으로 들어있는 datetime 자료형이 굉장히 잘 되어있다. 나중에도 써먹을 일이 많을 듯.

2. 예전 플젝에서도 expanded를 써본적이 있긴 한데 그때는 좀 영문을 모른체 아무튼 되니까 써먹는 느낌이었다면 이번에는 좀 알고 쓰는 느낌? row 안에서 정의되어 있으니까 당연히 좌우로만 expand하는걸 알고 썼다.