checkBox & checkBoxListile

Stateful 에서 주로 활용하는 위젯인
checkBox & checkBoxListile
에 대해 알아보겠습니다.

---

본격적으로 알아보기 앞서, 파일 분리해서 관리하는 방법에 대해 알아보겠습니다.

• main 위에 dart 파일 생성하기

• 새 다트 파일에 material.dart 임포트하기
  

• main.dart
  

  • 다른 파일에서 생성한 Ex02Check 커서 올리고, 컨트로 스페이스 해서 임포트해주기
  • 이러면 다른 파일에서 생성한 것을 사용가능
  • 플러터에서는 이런식으로 파일을 분리하고 관리합니다.

---

checkBox

• 보이는 화면 같이 체크하면, 체크가 되고, 다시 누르면 체크가 해제되는 것을 checkBox 입니다.

• 이 또한, Stateful로 구현합니다

• 원리는 숫자올리기와 비슷합니다.

• Checkbox(value: 불리언, onChanged: (아무이름){ 이 부분에 setState((){}) }

• 코드

class Ex02Check extends StatefulWidget {
  const Ex02Check({super.key});

  @override
  State<Ex02Check> createState() => _Ex02CheckState();
}

class _Ex02CheckState extends State<Ex02Check> {
  bool isChecked = false;
  //List 관리
  List<bool> checkList = [false,false,false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // value : check여부 - true - 체크 // false - 체크해제
            Row(
              children: [
                Checkbox(value: checkList[0], onChanged: (v){
                  // onChange 안의 매개변수 (v) : 체크가 해지되어 있으면 - true
                  // 체크가 되어 있으면 false
                  print(v);
                  // ? - null 허용 기호
                  // ! - null 불허 기호
                  setState(() {
                    checkList[0] = v!;
                  });
                
                }),
               Text('운동')
                
              ],
            ),
            Checkbox(value: checkList[1], onChanged: (v){
              setState(() {
                checkList[1] = v!;
              });

            }),
            Checkbox(value: checkList[2], onChanged: (v){
              setState(() {
                checkList[2] = v!;
              });
            }),
          ],
        ),
      ),
    );
  }

• 처음에, bool isChecked = false; 로 임의대로 선언해 놓기.

• 리스트로 변경한 이유 : 각각 체크 박스를 분리 해주기 위해, isChecked로 설정할 시, 세개가 한번에 작동함

• setState(() {
  checkList[0] = v!;
  }); // !를 사용하지 않으면, 오류 발생.

checkBoxListile

• 체크 박스를 사용하면, 체크박스만을 눌러야 상태가 변경
• 사용자 편의를 타일을 클랙해도 상태가 변경되도록 도와주는 위젯

• 칸 전체를 클릭해도 상태가 바뀝니다.

• 사용 방법 : 체크박스랑 사용법이 동일

  • 자체적으로 텍스지원

  • 정렬지원

    • controlAffinity: ListTileControlAffinity.leading (왼쪽)
    • controlAffinity: ListTileControlAffinity.trailing (오른쪽)

• 코드

class Ex03Check extends StatefulWidget {
  const Ex03Check({super.key});


  @override
  State<Ex03Check> createState() => _Ex03CheckState();
}

class _Ex03CheckState extends State<Ex03Check> {
  List<bool> checkList = [false,false,false];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // value : check여부 - true - 체크 // false - 체크해제

            CheckboxListTile(
                title: Text('낚시'),
                controlAffinity: ListTileControlAffinity.leading,
                value: checkList[1], onChanged: (v){
              setState(() {
                checkList[1] = v!;
              });

            }),
            CheckboxListTile(
              title: Text('운동'),
                // 디폴트 trailing
                controlAffinity: ListTileControlAffinity.leading,
                value: checkList[2], onChanged: (v){
              setState(() {
                checkList[2] = v!;
              });
            }),
          ],
        ),
      ),
    );
  }
}