ex24. checkBox
2024. 6. 13. 09:58ㆍFlutter
import 'package:flutter/material.dart';
class ExCheckBox extends StatefulWidget {
const ExCheckBox({super.key});
@override
State<ExCheckBox> createState() => _ExCheckBoxState();
}
class _ExCheckBoxState extends State<ExCheckBox> {
// 체크박스의 체크여부를 담을 수 있는 변수 생성!
bool isChecked = false;
// 여러개의 체크 여부를 한번에 관리할 수 있는 list 생성
List<bool> isCheckedList = [false, false, false];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Checkbox(
value: isChecked,
onChanged: (value) {
setState(() {
isChecked = value!; // value! : null 값이 아니면 담아줌
});
}),
Text('첫번째 체크박스'),
],
),
// value : 체크의 여부를 판단할 수 있는 요소!
// ture -> O / false -> X
Row(
children: [
Checkbox(
value: isChecked,
onChanged: (value) {
setState(() {
isChecked = value!;
});
}),
Text('두번째 체크박스'),
],
),
CheckboxListTile(
// cehckboxlist는 체크박스가 기본적으로 오른쪽에 정렬
title: Text('세번째 체크박스'),
controlAffinity: ListTileControlAffinity.leading,
// 체크박스 위치를 왼쪽으로 변경
value: isCheckedList[0],
onChanged: (value) {
setState(() {
isCheckedList[0] = value!;
});
}),
CheckboxListTile(
title: Text('네번째 체크박스'),
controlAffinity: ListTileControlAffinity.leading,
value: isCheckedList[1],
onChanged: (value) {
setState(() {
isCheckedList[1] = value!;
});
}),
CheckboxListTile(
title: Text('다섯번째 체크박스'),
controlAffinity: ListTileControlAffinity.leading,
value: isCheckedList[2],
onChanged: (value) {
setState(() {
isCheckedList[2] = value!;
// 스낵바 생성!
if (isCheckedList[2] == true) {
// .of(context) :
ScaffoldMessenger.of(context).showSnackBar(
// ScankBar() 위젯을 사용하여 띄우고자 하는 내용 연결
SnackBar(
content: Text('다섯번째 체크박스'),
),
);
}
});
}),
],
),
),
);
}
}
'Flutter' 카테고리의 다른 글
ex26. RadioButton (0) | 2024.06.13 |
---|---|
ex25. SwitchButton (0) | 2024.06.13 |
ex23. Button (0) | 2024.06.13 |
ex22. abstract (0) | 2024.06.13 |
ex21. inheritance (0) | 2024.06.13 |