[SSAFYcial] Flutter CheckboxListTile 스타일 커스텀하기

안녕하세요 ! SSAFYcial 11기 이지혜기자입니다.

 

이번 특화 프로젝트에 Flutter를 사용해 프로젝트를 진행하게 되면서, Style 커스텀이 힘들어서 다시 React로 돌아가고 싶어졌는데요...

 

어쩌다 보니 계속해서 새로운 프레임워크를 접하는 것 같아 늘 공부해야 하는 수 밖에 없는 것 같습니다. ㅎㅎ

 

그래서, 이번 기사는 Flutter 스타일 커스텀에 대해 작성해보려고 합니다.

 

---

 

나는 목업을 그대로 구현하는 것에 목숨거는 프론트인데, 플러터의 경우 기존에 작업하던 css가 아니어서인지, 아니면 flutter 자체가 커스텀이 어려운 것인지 정말 어려운 것 같다.

 

특히 플러터는 비교적 최근에 인기를 끌고 있고, 그래서 참고할만한 자료가 많지 않다.

 

내가 프로젝트를 진행하며 바꿔나간 커스텀 디자인들을 블로그로 작성해 flutter를 이용하시는 분들께 조금이나마 도움이 되려고 글을 작성하기로 했다.

 

---

 

CheckboxListTile

이상과 현실의 차이,,

 

Dropdown버튼으로 복수의 난이도를 선택하게 하려 했는데, 아무래도 무리가 있어 보여서 모달로 급하게 변경하였다.

 

그런데 모달 상태를 보니 너무 Css로 돌아가고 싶어지는 기분이 든다...

 

이대로는 안되겠어서 급하게 모달 스타일 커스텀을 하게 되었다.

 

수정 전

1차 수정 후

 

activeColor를 통해 활성화했을 때의 체크 박스 색을 프로젝트 메인 컬러로 변경해주고, 체크 박스에 라운드를 주었다

 

activeColor: Color(0xff1EA6FC),
    checkboxShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
),

 

 

흰 배경 설정

 

AlertDialog(
  backgroundColor: Colors.white,
)

 

AlertDialog에 배경색까지 설정하고 나니 그래도 좀 괜찮은 수준이 되었다.

 

추가 사항

onChanged: (bool? isChecked) {
  if (isChecked == true) {
    // 리스트에 값이 없는 경우 선택 추가
    if (conditionType == 'difficulty') {
      if (!controller.selectedDifficulty.contains(item)) {
        controller.selectedDifficulty.add(item);
      }
    } else {
      if (!controller.selectedDistance.contains(item)) {
        controller.selectedDistance.add(item);
      }
    }
  } else {
    // 선택되어 있는 경우 선택 해제
    if (conditionType == 'difficulty') {
      controller.selectedDifficulty.remove(item);
    } else {
      controller.selectedDistance.remove(item);
    }
  }
},

 

추가적으로, 다른 분들의 코드를 참고하니 CheckboxListTile의 onChanged 콜백에서 bool? isChecked 매개변수가 사용되고 있었다.

 

이전에 학습할 때 ?는 nullable 타입을 지정하기 위해서 사용하는 것으로 배웠는데,

체크 박스의 경우 true/false 외에 null을 왜 허용하는지에 대해 의문이 생겼다.

 

찾아보니 부분선택이나 다중 선택을 하는 경우에 nullable checkbox가 이용된다는 것을 알게 되었다.

 

예를 들면, 이메일에서의 전체 선택 체크박스와 개별 선택 체크박스가 있다.

특정 이메일을 일부만 선택하는 경우에 전체 선택 체크박스의 값는 true여서도, false여서도 안된다.

이러한 경우에는 상위 체크박스가 불확정 상태를 나타낸다는 것을 알게 되었다.