깡쌤의 플러터&다트 프로그래밍 11-2

---

체크박스, 라디오 버튼, 슬라이더, 스위치

모두 사용자에게 데이터를 입력받는 위젯

---

체크박스 - Checkbox

체크박스는 사용자에게 true나 false를 입력받는 위젯이다.
value 속성으로 체크박스의 값을 설정, onChanged 속성으로 상태 변경 시 호출할 이벤트 콜백

Row(
    children: [
    Checkbox(
        value: isChecked,
        onChanged: (bool? value) {
            setState(() {
            isChecked = value;
            });
        }),
    Text(
        'Checkbox value is $isChecked',
        style: const TextStyle(fontSize: 30),
    ),

---

라디오 버튼 - Radio

라디오 버튼은 true나 false를 압력받는 위젯이다. 여러 항목 중 하나만 선택 가능하다.

Row(
    children: [
    Radio(
        value: "android",
        groupValue: selectPlatform,
        onChanged: (String? value) {
        setState(() {
            selectPlatform = value;
        });
        },
    ),
    const Text('Android'),
    ],
),
Row(
    children: [
    Radio(
        value: "ios",
        groupValue: selectPlatform,
        onChanged: (String? value) {
        setState(() {
            selectPlatform = value;
        });
        },
    ),
    const Text('ios'),
    ],
),

---

슬라이더 - Slider

막대를 밀어서 숫자를 입력받는 위젯이다.
min, max 속성으로 값을 설정하며 막대를 밀면 onChanged에 지정한 함수의 매개변수에 전달한다.

Slider(
    value: sliderValue,
    min: 0,
    max: 10,
    onChanged: (double value) {
    setState(() {
        sliderValue = value;
    });
    },
),

---

스위치 - Switch

스위치는 사용자에게 true나 false를 입력받는 위젯이다.주로 활성화 또는 비활성화 상태를 선택받을 때 사용한다.

Switch(
    value: selectValue,
    onChanged: (bool value) {
    setState(() {
        selectValue = value;
    });
    },
),

---

체크박스, 라디오 버튼, 슬라이더, 스위치 활용하기 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const ch11_2());
}

class ch11_2 extends StatelessWidget {
  const ch11_2({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Practice'),
            ),
            body: const TestScreen()));
  }
}

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

  @override
  State<StatefulWidget> createState() {
    return TextState();
  }
}

class TextState extends State<TestScreen> {
  bool? isChecked = true;
  String? selectPlatform;
  double sliderValue = 5.0;
  bool selectValue = true;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: [
        const Text('CheckBox Test'),
        Row(
          children: [
            Checkbox(
              value: isChecked,
              onChanged: (bool? value) {
                setState(() {
                  isChecked = value;
                });
              },
            ),
            Text(
              'Checkbox value is $isChecked',
            ),
          ],
        ),
        const Text('Radio Test'),
        Row(
          children: [
            Radio(
              value: "android",
              groupValue: selectPlatform,
              onChanged: (String? value) {
                setState(() {
                  selectPlatform = value;
                });
              },
            ),
            const Text('Android'),
          ],
        ),
        Row(
          children: [
            Radio(
              value: "ios",
              groupValue: selectPlatform,
              onChanged: (String? value) {
                setState(() {
                  selectPlatform = value;
                });
              },
            ),
            const Text('ios'),
          ],
        ),
        Text(
          'RadioButton value is $selectPlatform',
        ),
        const Text(
          'Slider Test',
        ),
        Slider(
          value: sliderValue,
          min: 0,
          max: 10,
          onChanged: (double value) {
            setState(() {
              sliderValue = value;
            });
          },
        ),
        Text(
          'slider value is $sliderValue',
        ),
        Switch(
          value: selectValue,
          onChanged: (bool value) {
            setState(() {
              selectValue = value;
            });
          },
        ),
        Text(
          'select value is $selectValue',
        ),
      ],
    );
  }
}