[플러터로 달력만들기] #5. 날짜 선택하기

달력 만들기의 마지막으로는 날짜 선택을 해보려고 한다.

날짜를 선택하면 선택된 날짜에 border가 생기도록 처리해보겠다.

 

먼저 날짜 container에 inkwell을 주고 클릭 이벤트를 확인해보자

  InkWell(
 	onTap: () => print(controller.days[i]),
	child: Container(
    ...
 )

클릭 이벤트가 잘 동작함을 확인할 수 있다

 

다음으로는 컨트롤러에 날짜를 선택하기 위한 함수를 작성해보자

  // 날짜 선택
  pickDate(int index){
    for(var day in days){
      day["picked"].value = false;
    }
    days[index]["picked"].value = true;
  }

선택한 날짜 외 모든 day의 picked를 false로 바꾼 뒤 선택된 day의 picked값만 true로 바꿔주었다

 

이제 날짜 container에 pickDate 함수와 스타일을 바꾸기 위한 코드를 넣어준다

InkWell(
	onTap: () => controller.pickDate(i),
	child: Container(
		padding: EdgeInsets.symmetric(
			vertical: 10, horizontal: 5),
		width: 40,
		margin: EdgeInsets.symmetric(horizontal: 5, vertical: 2),
		decoration: BoxDecoration(
			color: controller.isToday(controller.days[i]["year"], controller.days[i]["month"], controller.days[i]["day"]) ? Colors.blueGrey : null,
			border: controller.days[i]["picked"].value ? Border.all(width: 2, color: Colors.blueGrey) : null,
		),
        ...
)

선택된 날짜에 border가 생기는 것을 확인할 수 있다.

 

---

날짜를 선택 후 달을 이동했다가 돌아오면 선택된 날짜가 초기화 되는 현상이 나타난다

달을 이동할 때마다 days를 초기화하고 다시 만들기 때문이다

 

선택된 날짜를 유지하기 위해 선택된 날짜를 저장할 변수를 만들어 사용해보자

  List pickedDay = [
    {"year": 0, "month": 0, "day": 0}
  ];

pickDate함수에 선택된 날짜를 저장하는 코드를 추가한다

  // 날짜 선택
  pickDate(int index) {
	...

    pickedDay[0]["year"] = days[index]["year"];
    pickedDay[0]["month"] = days[index]["month"];
    pickedDay[0]["day"] = days[index]["day"];
  }

days를 생성하는 insertDays의 마지막에 pickedDay가 존재한다면 선택된 날짜 picked값을 true로 바꿔주기 위한 코드를 추가한다

  insertDays(int year, int month) {
   ...

    if (pickedDay[0]["year"] != 0) {
      for (var day in days) {
        if (day["year"] == pickedDay[0]["year"] && day["month"] == pickedDay[0]["month"] && day["day"] == pickedDay[0]["day"]) {
          day["picked"].value = true;
        }
      }
    }
  }

이제 달을 이동하고 돌아와도 선택되었던 날짜가 유지되는 것을 확인할 수 있다!