Flutter[플러터] / CheckboxListTile을 사용하여 체크박스 타일 만들기 (체크박스리스트타일, 탭, 목록, 레이블)CheckboxListTile (Flutter Widget of the Week)

CheckboxListTile class

체크박스가 있는 ListTile 입니다. 즉, 레이블이 있는 체크박스입니다.

목록 타일 전체는 상호 작용이 가능합니다. 타일의 아무 곳이나 탭 하면 확인란이 전환됩니다.

https://youtu.be/RkSqPAn9szs

공식 문서 코드

 

 

 

---

보통 체크 박스를 사용할 때에는 단독으로 사용하지 않고 리스트 타일 와 함께 결합하여 사용자들에게 친숙한 모습으로 사용되곤 한다. 근데 또 리스트 타일 만들고 체크 박스 그 안에 넣고 하려면 너무나 생산 코스트가 많이 들것이다. 이럴 때 사용할 수 있는 위젯이 있으니 바로 CheckboxListTile위젯이다.

이 CheckboxListTile 위젯은 Checkbox와 ListTile을 결합한 위젯이다. 사용자에게 체크 가능한 옵션 목록을 보여줄 때 자주 사용되는데 기본적으로 왼쪽(또는 오른쪽)에 체크박스가 있고, 그 옆에 텍스트나 아이콘 등의 콘텐츠가 배치되게 된다. 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
value	bool?	–	체크 상태를 나타냄. null은 tristate가 true일 때만 허용됨
onChanged	ValueChanged<bool?>?	–	체크 상태가 변경될 때 호출되는 콜백 함수
mouseCursor	MouseCursor?	null	마우스 커서 스타일 지정
activeColor	Color?	null	체크 상태일 때의 색상
fillColor	MaterialStateProperty<Color?>?	null	체크박스 내부를 채우는 색상
checkColor	Color?	null	체크 표시의 색상
hoverColor	Color?	null	마우스 오버 시 배경 색상
overlayColor	MaterialStateProperty<Color?>?	null	눌림 또는 호버 상태의 오버레이 색상
splashRadius	double?	null	스플래시 반경 크기
materialTapTargetSize	MaterialTapTargetSize?	shrinkWrap	터치 영역 크기 설정
visualDensity	VisualDensity?	null	위젯의 시각적 밀도 설정
focusNode	FocusNode?	null	포커스 노드 지정
autofocus	bool	false	자동 포커스 여부
shape	ShapeBorder?	null	타일의 테두리 모양 지정
side	BorderSide?	null	체크박스 테두리 설정
isError	bool	false	에러 상태 표시 여부
tileColor	Color?	null	기본 배경 색상
title	Widget?	null	주요 텍스트 위젯
subtitle	Widget?	null	부가 텍스트 위젯
secondary	Widget?	null	체크박스 반대편에 위치하는 보조 위젯
isThreeLine	bool	false	3줄 구성 여부 (subtitle이 있어야 true 가능)
dense	bool?	null	좁은 간격으로 표시할지 여부
selected	bool	false	선택된 상태로 표시할지 여부
controlAffinity	ListTileControlAffinity?	null	체크박스 위치 지정 (leading, trailing)
contentPadding	EdgeInsetsGeometry?	EdgeInsets.symmetric(horizontal: 16.0)	내용 주위 패딩 설정
tristate	bool	false	true/false/null 세 가지 상태 허용 여부
checkboxShape	OutlinedBorder?	null	체크박스의 모양 설정
selectedTileColor	Color?	null	선택 상태일 때 타일 배경색
onFocusChange	ValueChanged<bool>?	null	포커스 상태 변경 시 콜백
enableFeedback	bool?	null	진동 등 피드백 활성화 여부
enabled	bool?	null	체크박스 비활성화 여부
internalAddSemanticForOnTap	bool	false	세맨틱스에 button: true 설정 여부
checkboxScaleFactor	double	1.0	체크박스 크기 배율
checkboxSemanticLabel	String?	null	체크박스 접근성 레이블

이 CheckboxListTile이 특별한 점은 Checkbox와 ListTile을 결합해 주지만 단순히 Checkbox의 앞과 뒤에 위젯을 만드는 것이 아니라 ListTile 내 어디서든 클릭만으로 Checkbox를 켰다 끌 수 있도록 만들어준다는 것이다.

사용하는 방법은 엄청 쉽다. 일단 사용하기 위해서는 bool 타입의 변수를 하나 만들어줘야 한다.

bool isSelected = false;

이 변수는 기본적으로 체크박스인 만큼 달려 있는 파라미터인 vaule에 넣어줄 것이고 또한 마찬가지로 체크박스이니 토글 동작을 위해 만들어줄 것이다.

이제 바로 사용해 주면 된다.

CheckboxListTile(
  value: isSelected,
  onChanged: (value) {
    setState(() {
      isSelected = !isSelected;
    });
  },
)

CheckboxListTile는 필수 파라미터로 vaule와 onChanged를 받는데 위의 코드와 같이 기본적인 동작만 넣어줘도 완벽하게 동작할 것이다.

이제 이렇게 만들어서 실행해 보면 아래와 같이 나타날 것이다.

타일 부분을 클릭한 모습

실행해보면 알겠지만 기본적으로 타일 부분도 터치 동작이 되고 체크박스 부분도 잘 된다.

이제 여기다가 요소들을 채워주면 되는 것이다.

가장 먼저 title 파라미터다.

title: Text('Check! Mate(?)'),

ListTile인 만큼 title 파라미터를 활용하여 바로 텍스트를 넣어줄 수 있다. 이제 여기에서 앞에 아이콘을 넣고 싶다면 secondary 파라미터도 넣어주면 된다.

title: Text('Check! Mate(?)'),
secondary: Icon(Icons.info),

여기서 알아야 할 점은 secondary의 타입은 Widget이기 때문에 아이콘뿐만 아니라 원하는 위젯을 배치할 수 있다는 것이다.

근데 여기서 체크박스의 위치가 마음에 안들 수 있다. 그렇다면 controlAffinity 파라미터를 사용하여 체크박스의 위치를 변경해 주자. 변경을 위해선 ListTileControlAffinity의 생성자를 사용해줘야 하는데 여기서 leading은 체크박스가 앞쪽 가장자리에 표시되게 되고 trailing을 사용하게 되면 원래 위치해 있듯이 뒤쪽 가장자리에 표시되게 된다. 또한 platform 생성자를 사용하게 되면 현재 플랫폼에서 일반적인 방식으로 텍스트를 기준으로 컨트롤을 배치하고 보조 위젯은 반대쪽에 배치되게 된다.

controlAffinity: ListTileControlAffinity.leading, // 앞!

이제 마지막으로 당연하지만 색도 바꿀 수 있다. 체크 박스의 색을 바꾸고 싶다면 fillColor 파라미터를 사용해 주면 되는데 스위치나 여타 다른 토글 버튼들과 마찬가지로 WidgetStateProperty를 사용해줘야 한다. 이 코드 솔직히 기억 안 날 때가 90%인데 그냥 그럴 때는 Doc comments 들어가서 코드 그대로 복사해 오자.

fillColor: WidgetStateProperty.resolveWith<Color>((Set<WidgetState>states) {
  if (states.contains(WidgetState.selected)) {
    return Colors.green;
  }
  return Colors.white;
}),

다행히도 타일 색은 쉽게 바꿀 수 있다.

tileColor: Colors.green[100],

이렇게 간단하게 CheckboxListTile 위젯에 대해서 알아보았다. 이 위젯은 정말 체크박스는 써야겠는데 일단 리스트 타일에 넣어놔야 할 때 정말 최고의 재격 위젯인 것 같다. 도움이 되었길 바라며 마치겠다.