Flutter 기초 - RadioButton (18)

 

Flutter 기초 - RadioButton (18)

 

1. Radio버튼

 - 사용자에게 옵션들중 하나만 선택할 수 있게하는 위젯으로 라디오 버튼은 서로 연관된 그룹안에서 단 하나의 항목만을 선택할 수 있도록 제한하기 때문에 설정 혹은 조정 에서 여러 옵션중 하나를 선택해야할때 유용하게 사용할 수 있다.

 

2. Radio버튼 기본구조

value	라디오 버튼의 고유한 값으로 열거형(enum)을 사용해 각 옵션을 명시한다.
groupValue	현재 그룹에서 선택된 값을 나타내며 value값과 같을 경우 해당 라디오 버튼이 선택된 것으로 표시된다.
onChanged	라디오 버튼의 값이 변경될때 실행할 콜백함수로 사용자가 라디오 버튼중 하나를 탭할 때 마다 호출된다.

 

3. RadioButton동작방식

oValue { test1, test2, test3 }

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

  @override
  State<TestRadioButton> createState() => _TestRadioButtonState();
}

class _TestRadioButtonState extends State<TestRadioButton> {
  TestRadioValue? selectValue;
  final Map<TestRadioValue, String> labels = {
    TestRadioValue.test1: "라디오 1",
    TestRadioValue.test2: "라디오 2",
    TestRadioValue.test3: "라디오 3",
  };

  @override
  Widget build(BuildContext context) {
    return Column(
      children: TestRadioValue.values.map((value) {
        return ListTile(
          leading: Radio<TestRadioValue>(
            value: value,
            groupValue: selectValue,
            onChanged: (TestRadioValue? newValue) {
              if (newValue != null) {
                setState(() {
                  selectValue = newValue;
                });
              }
            },
          ),
          title: Text(labels[value]!),
          onTap: () {
            setState(() {
              selectValue = value;
            });
          },
        );
      }).toList(),
    );
  }
}

 

TestRadioButton

 - 라디오 버튼을 구현하는 StatefulWidget으로 TestRadioValue에 열거형으로 정의된 값중 하나를 선택할 수 있다.

 

_TestRadioButtonState

 - selectValue : 현재선택된 라디오버튼의 값을 저장하는 변수

 - lables : 라디오 버튼과 연결된 레이블을 저장하는 맵으로 라디오 버튼의 value와 사용자에게 보여줄 문자열을 연결한다.

 

Column내부에서 TestRadioValue.values.map을 사용해 각 라디오 값에 대한 ListTile을 생성하고 ListTile은 사용자 인터렉션을 쉽게 만들어주는 위젯.

 

Radio Widget

 - value : 라디오 버튼 값 (TestRadioValue.test1, test2, test3)

 - groupValue : 현재 그룹에서 선택된 값(selectValue)가 value와 같다면 라디오버튼은 선택된 것으로 표시된다.

 - onChanged : 라디오 버튼을 탭할 때 호출되는 콜백으로 새 값을 받아 selectValue를 업데이트하고 setState를 호출해 UI를 갱신한다.