[flutter/플러터] 간단한 커스텀 체크박스 만들기 - AnimatedContainer

완성할 화면

사용할 위젯과 기술은
1) AnimatedContainer 위젯 - 상태변화에 자연스럽게 대응해, 사용자경험을 좋게 만들어줌. 즉, 따로 설정해주지도 않아도 상태변화를 자연스러운 연속적 애니메이션으로 만들어줌.
2) GetX 통해서 상태변화를 해주겠음

Widget _buildMissitonCompleteBox(int index) {
    return Obx(()=>GestureDetector(
      onTap: (){
        controller.updateMissionComplete(index);
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        width: controller.missionComplete[index]?33:32,
        height: controller.missionComplete[index]?33:32,
        decoration: BoxDecoration(
          border: controller.missionComplete[index]
              ?Border.all(color:Colors.green,width: 2)
              :Border.all(color:Colors.grey,width: 1.5),
          borderRadius: BorderRadius.circular(10),
        ),
        curve: Curves.linearToEaseOut,
        child: controller.missionComplete[index]?Icon(Icons.park,color: Colors.green,):null,

      ),
    ));
  }

별거 없음. 그냥 바꿔주고 싶은 프로퍼티를 삼항연산으로 만들어주면됨!

예시 - 크기 변경
width : bool타입 변수(getX 컨트롤러 통해서 변경 가능하게 해놔야겠지) ? true일때 너비 : false일때 너비

onTap시에 controller 통해 박스의 프로퍼티 값 변경에 기준이 되는 bool 변수를 바꿔주는 메소드를 동작시킨다.