서론
이번에는 Checkbox, Radio, Slider, Switch 위젯에 대해서 알아보겠습니다. 이 위젯들은 모두 유저로부터 데이터를 입력 받는 위젯으로서, 정해진 옵션 중에서 선택을 할 수 있게 해주는 위젯들입니다. 각 위젯별로 자세한 사용법은 아래와 같습니다.
목차
- Checkbox
- Radio button
- Slider
- Switch
본문
- Checkbox: Checkbox는 유저로부터 true나 false 중의 하나를 입력 받는 Boolean 입력값을 처리하는 widget입니다. 여러 개의 옵션이 주어져 있다면 여러 개의 옵션에 동시에 체크하여 선택할 수 있습니다. value 프로퍼티로 Checkbox의 값을 설정하며 유저가 체크 상태를 변경할 때 호출할 event callback 함수는 onChanged 프로퍼티에 등록합니다. 코드 예시는 다음과 같습니다:
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value;
}); - Radio: Radio button은 여러 개의 옵션 중에서 하나만 선택하 수 있도록 제공하는 위젯입니다. 유저가 Radio button을 선택하면 해당값이 선택된 옵션으로 변경됩니다. Checkbox와 다른 점은 Checkbox는 여러 개의 옵션을 선택할 수 있는 반면에 Radio는 하나의 옵션만 선택할 수 있다는 점이 다릅니다. 즉, groupValue 프로퍼티가 똑같은 위젯 가운데 하나만 선택할 수 있습니다. 코드 예시는 아래와 같습니다:
- Radio widget에 대한 코드 예시 -
Row(
children:[
Radio(
value: "Option01",
groupValue: selectOption,
onChanged:(String? value){
setState((){
selectOption = value;
});
}
),
Text('Option01')
],
),
Row(
children:[
Radio(
value: "Option02",
groupValue: selectOption,
onChanged:(String? value){
setState(() {
selectOption = value;
});
}
),
Text('Option02')
],
),
Text('Selected option: $selectOption')
위의 코드에서 두 Radio button 모두 groupValue 프로퍼티에 selectOption 값을 설정했으므로 하나의 그룹이 되어 둘 중 하나만 선택할 수 있습니다.
3. Slider: Slider는 뮤직앱에서 흔히 볼 수 있는 음량을 조절할 때 사용되는 막대를 밀어서 조절하는 기능을 가진 위젯입니다. 슬라리더 위젯은 min, max 프로퍼티로 값을 설정하며 유저가 막대를 왼쪽이나 오른쪽으로 밀면 그 사이의 값이 onChanged에 지정한 함수의 매개변수에 전달됩니다. Silder 위젯을 활용한 코드 예시는 아래와 같습니다:
Slider(
value: selectValue,
min:0,
max:10,
onChanged: (double value) {
setState((){
selectValue = value;
});
}
4. Switch: Switch는 유저에게 true나 false를 선택할 수 있게 해주는 위젯입니다. Toggle switch 라고도 불리우며, 주로 유저가 이떤 기능을 끄거나 켤 때, 혹은 어떤 메뉴를 보이거나 안 보이게 하거나 할 때와 같이 활성화 또는 비활성화를 할 때 사용하는 스위치입니다. Switch 위젯을 사용한 코드 예시는 다음과 같습니다.
Switch(
value: selectValue,
onChanged:(bool value){
setState((){
selectValue =value;
});
}
),
댓글