StatefulWidget 위젯을 이용해 생성.
/// 전체 코드
class TestCheckBox extends StatefulWidget {
...
}
class _TestCheckBoxState extends State<TestCheckBox> {
late List<bool> values;
void initState() {
super.initState();
values = [false, false];
}
Widget build(BuildContext context) {
return Row(
children: [
Checkbox(
value: values[0],
onChanged: (value) => changeValue(0, value ?? false)),
Checkbox(
value: values[1],
onChanged: (value) => changeValue(1, value ?? false)),
],
);
}
void changeValue(int index, bool value) {
setState(() {
values[index] = value;
});
}
}
체크 박스 생성시 bool타입인 value
와 changed
가 있다.
changeValue()함수를 통해 values
에 index
를 통해 특정된 값을 onChanged
에서 받은 값으로 변경한다.
아래와 같이 이쁜 체크박스도 있다.
이런 형태는 토이 프로젝트에도 많이 사용할 수 있겠다.
CheckboxListTile(
title: Text("title"),
subtitle: Text("subTitle"),
controlAffinity: ListTileControlAffinity.leading,
value: list[0],
onChanged: (newValue) {
setState(() {
list[0] = newValue ?? false;
});
}
);
라디오는 선택이 중복 될 수 없다.
따라서, 라디오는 enum
을 사용했다.
그룹화해 사용할 수 있는 상수를 한군대 모아 사용할 수 있다.
enum
은 API를 사용해 개발시 다뤄질 것으로 보인다. 그때 집중적으로 공부하겠다.
// HTML에서 ID를 모아둔 느낌
enum TestRadioValue {
test1,
test2,
}
class _TestRadioState extends State<TestRadio> {
TestRadioValue? selectValue; // Radio에 groupValue를 할당하기 위해 선언
Widget build(BuildContext context) {
return Column(
children: [
// 라디오를 생성하고 generic type이 필요한데, 이것은 enum으로 잡는다.
Radio<TestRadioValue>(
value: TestRadioValue.test1, //해당 라디오의 ID
groupValue: selectValue,
onChanged: (value) => changeRadio(selectValue, value)
),
Radio<TestRadioValue>(
value: TestRadioValue.test2,
groupValue: selectValue,
onChanged: (value) => changeRadio(selectValue, value)
)
],
);
}
void changeRadio(stateValue, value) {
setState(
() => selectValue = value,
);
}
}
TestRadioValue? selectValue;
와 groupValue에 selecValue
가 잘 이해되지 않는다.
TestRadioValue 타입을 갖는 selecValue를 선언했다. (null 일 수 있는)
실제로, print결과는 초기값이 null이었다.
class _TestRadioState extends State<TestRadio> {
TestRadioValue? selectValue; // Radio에 groupValue를 할당하기 위해 선언
Widget build(BuildContext context) {
print('-->$selectValue1');
// '--> null'
return Column(
children: [
// 라디오를 생성하고 generic type이 필요한데, 이것은 enum으로 잡는다.
Radio<TestRadioValue>(),
Radio<TestRadioValue>()
],
);
}
void changeRadio(stateValue, value) {
setState(
() => selectValue1 = value,
);
}
}
그리고, 라디오를 변경했을때, -->TestRadioValue.test1
로 나왔다.
changeRadio를 통해 selectValue1(null)이 setState를 통해 value를 받고 groupValue가 변경되며 라디오의 상태가 변경된다.
실제로, TestRadioValue? selectValue1 = TestRadioValue.test2;
로 설정하면 두번째 라디오 가 체크 되었다.
고 이해했다. (앞으로 프로젝트를 진행하며 테스트해 볼 계획이다)
그외 슬라이더와 팝업 메뉴 등
많은 위젯이있는데, 필요한 위젯이 있을경우 아래 주소에서 찾아볼 수 있다.
https://api.flutter.dev/flutter/material/material-library.html#classes