[Flutter] Checkbox Widget 사용법

 

 

Checkbox Widget은 많이 사용되지만 위젯의 크기와 모양, 컬러를 변경하는 부분에서 헷깔릴 때가 많습니다. 

그래서 자주 사용되는 기능들을 사용해서 정리해봤습니다.

 

특히 설정하기 어려웠었던 부분은 체크박스의 기본 패딩 제거와 사이즈 변경이었습니다. 

체크박스는 기본적인 사이즈와 패딩을 가지고 있는데 패딩을 제거하기 위해서는 materialTapTargetSize 특성에 MaterialTapTargetSize.shrinkWrap를 입력하면 됩니다.

그리고 크기를 변경하기 위해서는 Transform.scale 위젯을 사용할 수 있습니다. 

 

	
    /// 체크박스의 사이즈조절을 하려면 scale 사용 필요
    /// ex) scale 1.2 => 크기 1.2배
    Transform.scale(
      scale: 1.2,
      child: Checkbox(
      
      	/// 체크박스 선택 값 
        value: true,

        /// 체크박스를 누르고 있을 때 발생하는 splash 이벤트의 컬러 
        overlayColor: MaterialStatePropertyAll(Colors.green.withOpacity(0.2)),

        /// splash의 크기
        splashRadius: 24,

        /// MaterialTapTargetSize.padded : 최소사이즈 48x48 로 세팅
        /// MaterialTapTargetSize.shrinkWrap : Material에 의해 제공된 최소 사이즈
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

        /// 선택 안 됐을 때 테두리 컬러와 
        /// 선택 됐을 때 배경 컬러 설정 
        fillColor: const MaterialStatePropertyAll(Colors.green),

        /// 체크박스의 모양 변경
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),
        ),

        /// 체크박스를 클릭했을 때 호출
        onChanged: (value) {
          setState(() {
            /// 체크박스 선택 값 변경 
          });
        },
      ),
    );