Flutter 개발일지 day 3

화면 전체 구성

화면에 30 ~ 31일에 달하는 날짜들을 어떻게 표시할지에 대해 좀 깊게 논의해봤다. 매월마다 무슨 요일로 시작하는지 달라지기 때문에, 6개의 주 까지 생일 수 있기 때문이다. 이런 경우를 모두 감안해서, 한 주에 7일씩 6개의 주로 이루어진 42개의 컨테이너를 만들었다. 이 과정에서 위젯 단위의 for문을 적용했다.

Column(
    children:[
        Row(), // -> 요일 표시 row
        const Divider(height: 0), // 구분선
        Row(
            children:[
                for(int i = 0; i<7; i++)
                Expanded(child: Container(
                  height: 40,
                  child: MyText(daylist[i].day.toString(), 15),
              )),
            ]
        ), // 1주차
        //... 나머지도 총 6주차까지 반복
    ]
)

위에서부터 7개의 container를 담은 row를 통 6번 반복해서 작성했고, row 안에서는 for문으로 7개의 컨테이너를 작성했다. 그리고 구분감을 위해 row와 row 사이에는 divider를 넣어서 선을 그어줬다.

코드 개선

1. 잦은 반복을 피하기 위해 위에서도 언급했듯 container 반복에는 for문을 이용했다. row는 좀 이유가 있어서 반복시키지 못했다. 복잡해질바에 그냥 6번 쓰기로 결정..

2. 반복적인 text위젯에 대해 mytext라는 위젯을 새로 구성했다. 매번 사이즈, alignment, color 등을 입력받는게 낭비 같아서 사이즈랑 내용만 입력받고 나머지는 사전에 고정해놨다.

일자 표시 알고리즘 구현

우리가 만든 42개의 container에 해당 월에 해당하는 날짜 30~31개를 뿌리는 알고리즘을 구현했다.

class GenerateDay{
  List<DateTime> daylist(DateTime cursor) {
    var firstday = DateTime(cursor.year, cursor.month,1);
    var dlist = List<DateTime>.filled(42,DateTime(0,0,0));
    dlist[firstday.weekday-1] = firstday;
    int i = firstday.weekday;
    int j = 2;
    while (i <= 41) {
      dlist[i] = DateTime(firstday.year, firstday.month, j++);
      i++;
    }
    return dlist;
  }
}

GenerateDay.dlist를 호출하면 우리가 원하는 list를 리턴한다. 이 리스트는 길이가 42(container 개수가 42개라서)인 리스트로, 그 월이 시작하는 날짜부터 1이 들어간다. 예들 들어 1월 1일이 월요일이라면, list = [1, 2, 3, …]이 될테고 수요일이라면, list = [init, init, 1, 2, 3, …]이 될 것이다.

배운점

코드를 짜임새 있게 짜지 않으면 (심각할 정도로) 코드가 난잡해진다. 당장 컨테이너 42개를 처음으로 나열했을 때, 컨테이너 하나를 수정하면 그 작업을 42번 반복하는 미친(…) 노가다를 했어야 했다. 그래서 반복되는 단위들은 module화 시켜서 일괄적으로 변하게 할 수 있도록 “해야만”한다는 것을 체감했다.