Flutter: Checkbox, Switch, Radio

Checkbox와 Switch

체크박스와 스위치는 사용법이 동일.

var isChecked = false;

Checkbox(value: isChecked, onChanged: (value) {
  setState(() {
    isChecked = value!;
  });
}),
Switch(value: isChecked, onChanged: (value) {
  setState(() {
    isChecked = value!;
  });
}),

RadioListTile로 라디오버튼과 텍스트를 함께 선택하도록 하기

enum Answer { yes, no }

class _MyHomePageState extends State<MyHomePage> {
  Map<int, Answer?> answerVal = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            contentPadding: const EdgeInsets.all(16.0),
            title: const Text('선택'),
            subtitle: Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Row(
                children: [
                  Expanded(
                    child: RadioListTile<Answer>(
                      title: const Text('예'),
                      value: Answer.yes,
                      groupValue: answerVal[index],
                      onChanged: (Answer? value) {
                        setState(() {
                          answerVal[index] = value;
                        });
                      },
                    ),
                  ),
                  Expanded(
                    child: RadioListTile<Answer>(
                      title: const Text('아니오'),
                      value: Answer.no,
                      groupValue: answerVal[index],
                      onChanged: (Answer? value) {
                        setState(() {
                          answerVal[index] = value;
                        });
                      },
                    ),
                  ),

                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

https://stackoverflow.com/a/69880427 참고.

이것도 살펴보세요!

Vue3: 프로젝트 폴더/파일 구성, ESLint

새로 만든 Vue 프로젝트의 폴더/파일 구성 폴더/파일내용.vscodeVisual Studio용 설정 파일dist배포용 파일 세트를 저장node_modules라이브러리를 저장public웹으로 공개할 …

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다