[flutter]기본 위젯 Radio와 RadioListTile

 

Radio는 그룹 내에서 하나만 선택할 때 사용합닏. 그룹이 되는 항목을 열거형(enum)으로 정의하고, groupValue 프로퍼티에 열거형으로 정의한 Gender 타입의 변수를 지정하고, onChanged이벤트에서 변경된 값을 반영합니다.

현재는 ListTile을 사용했기 때문에 라디오 버튼을 터치해야 인식됩니다.

 

enum Gender {MAN, WOMEN}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var _isChecked = false;
  Gender _gender = Gender.MAN;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox / Radio / Switch'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             ListTile(
               title: Text('남자'),
               leading: Radio(
                 value: Gender.MAN,
                 groupValue: _gender,
                 onChanged: (value) {
                   setState(() {
                     _gender = value;
                   });
                 },
               ),
             ),
              ListTile(
                title: Text('여자'),
                leading: Radio(
                  value: Gender.WOMEN,
                  groupValue: _gender,
                  onChanged: (value) {
                    setState(() {
                      _gender = value;
                    });
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

RadioListTile을 사용하면 가로 전체가 터치영역이 됩니다.

 

enum Gender {MAN, WOMEN}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  var _isChecked = false;
  Gender _gender = Gender.MAN;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox / Radio / Switch'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             RadioListTile(
               title: Text('남자'),
               value: Gender.MAN,
               groupValue: _gender,
               onChanged: (value) {
                 setState(() {
                   _gender = value;
                 });
               },
             ),
              RadioListTile(
                title: Text('여자'),
                value: Gender.WOMEN,
                groupValue: _gender,
                onChanged: (value) {
                  setState(() {
                    _gender = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}