[플러터로 달력만들기] #3. 이전 달, 다음 달로 이동해보기

이번 달이 아닌 달로 이동할 수 있는 기능을 추가해보자

 

먼저 appBar에 달을 이동할 수 있는 버튼을 만들어주도록 한다.

        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.arrow_back_ios,
                size: 20,
                color: Colors.black,
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 30),
              child: Text(
                controller.year.toString() + "." + controller.month.toString(),
                style: TextStyle(fontSize: 20),
              ),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.arrow_forward_ios,
                size: 20,
                color: Colors.black,
              ),
            ),
          ],
        ),

IconButton을 사용하여 만들어주었다.

 

달을 이동하기 위한 동작을 onPressed안에 작성해보자.

// 이전 달로
 if (controller.month.value == 1) {
                  controller.month(12);
                  controller.year -= 1;
                } else {
                  controller.month -= 1;
                }
                controller.insertDays(controller.year.value, controller.month.value);
                
// 다음 달로
  if (controller.month.value == 12) {
                  controller.month(1);
                  controller.year += 1;
                } else {
                  controller.month += 1;
                }
                controller.insertDays(controller.year.value, controller.month.value);

달 이동을 위해선 전에 만들어둔 insertDays를 사용할 것이다. 다시 날짜들을 채워 넣기 위함!

1월일 때 이전달로 이동하거나 12월일 때 다음달로 이동하는 부분만 잘 처리하여 insertDays를 호출한다.

달이 바뀜에 따라 년, 월 Text도 바뀌어야하므로 년, 월이 출력되던 Container를 Obx로 감싸준다.

 

---

달 이동이 잘 되는것을 확인할 수 있다