Flutter[플러터] / SwitchListTile을 사용하여 레이블이 있는 스위치 제작하기 SwitchListTile (Flutter Widget of the Week)

SwitchListTile class

Switch가 있는 ListTile 입니다. 즉, 레이블이 있는 스위치입니다.

https://youtu.be/0igIjvtEWNU

공식 문서 코드

 

 

 

---

흔히 앱 내부의 설정에 들어가면 옵션을 켜고 끌 수 있는 기능이 마련되어 있다. 그러한 기능들은 보통 리스트 타일 같은 형식으로 제작되어 한쪽에는 그 옵션을 켜고 끌 수 있게 만들어주는 토글 버튼이 있다. 그렇다면 어떻게 이러한 것을 쉽고 빠르게 만들 수 있을까? 바로 SwitchListTile위젯을 사용하면 된다.

이 SwitchListTile은 스위치(Switch)와 리스트 타일(ListTile)을 결합한 위젯으로, 설정 화면과 같은 UI에서 토글 가능한 옵션을 만들 때 유용하게 사용된다. 바로 알아보자.

하위 속성

속성명	타입	기본값	설명
value	bool	–	스위치가 켜져 있는지 여부
onChanged	ValueChanged<bool>?	–	스위치 값이 변경될 때 호출되는 콜백 함수
activeColor	Color?	Theme.secondary	스위치가 활성화될 때 thumb 색상
activeTrackColor	Color?	Theme.secondary 50%	스위치가 활성화될 때 track 색상
inactiveThumbColor	Color?	–	비활성 상태의 thumb 색상
inactiveTrackColor	Color?	–	비활성 상태의 track 색상
activeThumbImage	ImageProvider?	–	활성화된 thumb에 표시할 이미지
inactiveThumbImage	ImageProvider?	–	비활성화된 thumb에 표시할 이미지
thumbColor	MaterialStateProperty<Color?>?	–	상태별 thumb 색상
trackColor	MaterialStateProperty<Color?>?	–	상태별 track 색상
thumbIcon	MaterialStateProperty<Icon?>?	–	thumb에 표시할 아이콘
materialTapTargetSize	MaterialTapTargetSize?	shrinkWrap	터치 영역 크기 설정
dragStartBehavior	DragStartBehavior	start	드래그 시작 시점 설정
mouseCursor	MouseCursor?	clickable	마우스 커서 형태
splashRadius	double?	Theme 설정값	터치 시 퍼짐 효과 반경
focusNode	FocusNode?	–	포커스를 관리하는 객체
onFocusChange	ValueChanged<bool>?	–	포커스 변경 시 콜백
autofocus	bool	false	자동 포커스 여부
tileColor	Color?	–	타일의 배경색
title	Widget?	–	타일의 주요 콘텐츠 (보통 Text)
subtitle	Widget?	–	title 아래에 위치하는 부가 설명
secondary	Widget?	–	보조 위젯 (보통 아이콘)
isThreeLine	bool	false	3줄 레이아웃 여부
dense	bool?	null	컴팩트한 레이아웃 적용 여부
contentPadding	EdgeInsetsGeometry?	horizontal 16.0	내부 패딩
selected	bool	false	선택된 상태인지 여부
controlAffinity	ListTileControlAffinity?	platform	Switch와 보조 위젯 위치 설정
shape	ShapeBorder?	–	타일의 외형 모양
selectedTileColor	Color?	–	선택 시 타일 배경색
visualDensity	VisualDensity?	–	시각적 밀도 조절
enableFeedback	bool?	–	피드백 사용 여부
hoverColor	Color?	–	호버 시 색상
applyCupertinoTheme	bool?	false	Cupertino 스타일 적용 여부
internalAddSemanticForOnTap	bool	false	접근성 세멘틱 설정 (임시용 속성)

 

사용하는 방법은 엄청 간단한데 일단 bool 타입 변수를 하나 만들어줘야 한다.

bool isToggled = false;

이 변수를 사용하는 곳은 스위치 내부로 value 파라미터에 참조하게 할 것이고 또한 onChange내부에 넣어서 토글 하는 동작을 만들어 주기 위해서 넣어 줄 것이다.

이제 사전 준비는 벌써 다 끝났으니 바로 사용해 주면 된다.

SwitchListTile(
  value: isToggled,
  onChanged: (value) {
    setState(() {
      isToggled = !isToggled;
    });
  },
)

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

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

실행해 보면 타일 부분도 상호작용이 동작이 되고 스위치 부분도 잘 토글 되는 것을 알 수 있다.

이제 스위치 부분은 완성이 되었으니 타일 부분에 요소를 채워주면 된다.

가장 먼저 title 파라미터다.

title: Text('스위치 리스트 타일'),

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

title: Text('스위치 리스트 타일'),
secondary: Icon(Icons.info),

또한 secondary 파라미터의 타입은 Widget이기 때문에 아이콘뿐만 아니라 원하는 위젯을 배치할 수 있다.

title: Text('플러터 대쉬'),
secondary: Image.network('https://docs.flutter.dev/assets/images/dash/Dash.png'),
value: isToggled,

여기서 스위치의 위치도 바꿔 줄 수 있다. 현재 오른쪽 구석에 위치해 있는데 controlAffinity 파라미터를 사용할 건데 controlAffinity의 타입인 ListTileControlAffinity를 바로 위젯으로 넣고 생성자를 붙여 사용이 가능하다.

controlAffinity: ListTileControlAffinity.leading, // 앞으로 이동

ListTileControlAffinity의 생성자 중 leading은 체크박스가 앞쪽 가장자리에 표시되게 되고 trailing을 사용하게 되면 원래 위치해 있듯이 뒤쪽 가장자리에 표시되게 된다. 또한 platform 생성자를 사용하게 되면 현재 플랫폼에서 일반적인 방식으로 텍스트를 기준으로 컨트롤을 배치하고 보조 위젯은 반대쪽에 배치되게 된다.

이제 색도 한번 바꿔보자.

스위치의 색은 thumbColor 파라미터와 trackColor 파라미로 원래 Switch위젯에서 색을 바꾸던 것처럼 그대로 바꿔줄 수 있다.

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

타일 색은 tileColor 파라미터를 사용해서 바꿔줄 수 있다.

tileColor: Colors.blue[50],

이렇게 간단하게 SwitchListTile 위젯에 대해서 알아보았는데 짬이 좀 찬 사람들은 알겠지만 이 리스트 타일에서 조금씩 변형된 위젯들은 다 사용법이 거의 비슷해서 하나만 사용할 줄 알아도 다 사용할 수 있다. 예를 들어 현재 SwitchListTile 위젯을 사용할 줄 안다면 ListTile은 기본으로 사용할 수 있게 되고 추가로 CheckBoxListTile과 RadioListTile도 사용할 수 있게 될 것이다.

암튼 도움이 되었길 바라며 마치겠다.