flutter로 에브리타임 시간표 따라하기

💬 만든 이유

아무리 찾아도 비슷한 코드가 없었다... 하나 만들면 좋을 거 같아서 그냥 만들어봤다.

더 좋은 방법이 있다면 알려주시면 감사하겠습니다.

🔨 따라하기

1. 틀 만들기

List week = ['월', '화', '수', '목', '금'];
var kColumnLength = 22;
double kFirstColumnHeight = 20;
double kBoxSize = 52;

사용한 변수들, 사이즈는 내 마음

Container(
	height: kColumnLength / 2 * kBoxSize + kColumnLength,
	decoration: BoxDecoration(
		border: Border.all(color: Colors.grey),
		borderRadius: BorderRadius.circular(12),
	),
)

먼저 에브리타임 시간표처럼 회색 틀을 만들어준다. 높이를 저렇게 설정한 이유가 있을텐데... 지금은 좀 지나서 그런지 기억이 나지 않는다.

2. row를 중심으로 할지, column을 중심으로 할지

처음 시간표를 만들면서 당연히 row로 쌓아나갔다. 하지만 월화수목금 요일 사이에는 아무런 관계가 없다는 점, 알록달록한 강의박스를 시간마다 끼워넣어야 한다는 점 이 두 가지 때문에 다 지우고 column으로 쌓아나갔다.

Row(
  children: [
    Column(),
  ],
)

이렇게 Container의 child를 구성해야했다.

시간 column 만들기

Expanded buildTimeColumn() {
  return Expanded(
    child: Column(
      children: [
        SizedBox(
          height: kFirstColumnHeight,
        ),
        ...List.generate(
          kColumnLength,
          (index) {
            if (index % 2 == 0) {
              return const Divider(
                color: Colors.grey,
                height: 0,
              );
            }
            return SizedBox(
              height: kBoxSize,
              child: Center(child: Text('${index ~/ 2 + 9}')),
            );
          },
        ),
      ],
    ),
  );
}

먼저 Sizedbox를 통해 에브리타임 시간표처럼 빈칸을 만들어 준다. 다음은 시간 List를 만들어주는데, 이게 지금보니 되게 복잡하다. Text와 Divider를 번갈아가며 return해서 칸을 만들어준다.

여기까지하면 이렇게 된다.

요일 만들기

List<Widget> buildDayColumn(int index) {
  return [
    const VerticalDivider(
      color: Colors.grey,
      width: 0,
    ),
    Expanded(
      flex: 4,
      child: Stack(
        children: [
          Column(
            children: [
              SizedBox(
                height: 20,
                child: Text(
                  '${week[index]}',
                ),
              ),
              ...List.generate(
                kColumnLength,
                (index) {
                  if (index % 2 == 0) {
                    return const Divider(
                      color: Colors.grey,
                      height: 0,
                    );
                  }
                  return SizedBox(
                    height: kBoxSize,
                    child: Container(),
                  );
                },
              ),
            ],
          )
        ],
      ),
    ),
  ];
}

요일을 만들 때 강의 박스를 어떻게 겹칠지 생각하며 만들어야 한다. flutter는 stack을 제공하기 때문에 이걸 이용해서 겹칠 생각을 했다. Container 하나 하나 채우면 안 되나 생각을 했는데, 9시 30분에 시작하는 수업, 10시 15분에 끝나는 수업처럼 칸의 크기와 다른 수업들을 생각해야 했다. 다섯번 실행시켜 요일별로 만들어준다.

참고로 List로 반환했으니 spread operator(...)를 통해 풀어주어야 한다.

3. 강의 쌓기

요일별로 만들었으니 이제 stack에 강의를 쌓아주면 된다.

Positioned(
  child: Container(
    color: Colors.green,
  ),
  top: kFirstColumnHeight + kBoxSize / 2,
  height: kBoxSize + kBoxSize * 0.5,
  width: 100,
),

뭐 이런식으로 채우면 된다. 적당히 강의 model을 넣어주면 완성!