[9] Flutter CheckBox, RadioButton

Flutter Flow

• 템플릿 선택해서 드래그 앤 드랍으로 화면을 구성하고 코드를 만들어 주는 사이트
  https://app.flutterflow.io/

Figma to Flutter

• Figma로 구성한 화면을 실제 Flutter에 적용할 수 있게 해주는 Figma사이트
  https://www.figma.com/community/plugin/1236863310201087089/figma-to-flutter

Firebase Studio

• 온라인 웹상에서 앱개발을 할 수 있는 사이트
• 전혀 설치같은게 필요없다.
  https://firebase.studio/

ex18_stateful

import 'package:flutter/material.dart';
// stl -> stateless 단축키
// stf -> stateful 단축키
class ExStateful extends StatefulWidget {
  const ExStateful({super.key});
  // 클래스 내부에서 변수를 사용하지 못하므로 반드시 final키워드를 사용하여 진행
  final int data1 = 5;
  @override
  State<ExStateful> createState() => _ExStatefulState();
}
class _ExStatefulState extends State<ExStateful> {
  // 일반 변수 지정이 가능! -> 해당하는 클래스는 상태를 체크하기 위한 기능을 물려받아
  // 생성되므로, 데이터 값이 언제든 바뀔 수 있다!
  bool isChecked1 = false;
  bool isChecked2 = false;
  bool isChecked3 = false;
  @override
  Widget build(BuildContext context) {
    // build 메소드는 화면을 설계하기 위해서 확정되어 있는 내용들만 사용할 수 있다!
    // 즉, 변수는 값이 바뀌므로 사용할 수 없다! => 문제점 완화! set state()
    // set state() : 상태가 바뀌거나 변수의 데이터가 바뀜을 감지할 수 있는 메소드
    // => 값이 바뀌면 바뀐 내용을 활용하여 build 메소드에게 화면 재구성을 자동적으로 요청 할 수 있다!
    return Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              // value 값 : true(체크 0), flase(체크x)
              Row(
                children: [
                  Checkbox(value: false, onChanged: (vlaue){
                    // 상태가 바뀌면 어떤 작업을 할지 로직을 세울 수 있는 영역!
                    setState(() {
                      isChecked1 = vlaue!;
                    });
                  }),
                  Text('data1'),
                ],
              ),
              Row(
                children: [
                  Checkbox(value: false, onChanged: (vlaue){
                    // 상태가 바뀌면 어떤 작업을 할지 로직을 세울 수 있는 영역!
                    setState(() {
                      isChecked2 = vlaue!;
                    });
                  }),
                  Text('data2'),
                ],
              ),
              // 사용자의 편의성을 위한 위젯
              // CheckboxListTile
              CheckboxListTile(
                title: Text('data3'),
                  controlAffinity: ListTileControlAffinity.leading,
                  value: isChecked3 , onChanged: (v){
                  setState(() {
                    isChecked3 = v!;
                  });
              })
            ],
          )
      ),
    );
  }
}
//////////////////////////
class ExStateless extends StatelessWidget {
  const ExStateless({super.key});
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

ex19_radio

import 'package:flutter/material.dart';
class Ex19Radio extends StatefulWidget {
  const Ex19Radio({super.key});
  @override
  State<Ex19Radio> createState() => _Ex19RadioState();
}
enum Gender { man, woman }
class _Ex19RadioState extends State<Ex19Radio> {
  Gender g = Gender.woman; // 기준이 되는 변수
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 객체타입
            // value는 radio의 버튼의 고유 값
            // groupValue를 바탕으로 value값과 같으며 true, 다르면 false
            RadioListTile(
              title: Text("남성"),
              value: Gender.man, groupValue: g, onChanged: (v) {
                print(v);
                setState(() {
                  g = v!;
                });
              },
            ),
            RadioListTile(
              title: Text("여성"),
              value: Gender.woman, groupValue: g, onChanged: (v) {
                print(v);
                setState(() {
                  g = v!;
                });
              },
            ),
            Switch(activeColor: Colors.red, value: isChecked, onChanged: (v){
              setState(() {
                isChecked = v;
              });
            })
          ],
        ),
      ),
    );
  }
}