Flutter 입력 관련 위젯

글자, 체크박스, 스위치, 라디오, 드롭다운 등 여러가지 입력에 대한 위젯을 정리해보자.

요약 : TextField, CheckBox, Switch, Radio/RidioListTile, DropDownButton, TextEditingController, Form, TextFormField

TextField

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Spacer(),
          TextField(), // 그냥 밑줄
          Spacer(),
          TextField(
            decoration: InputDecoration(
              labelText: 'Input Text' // 입력 힌트
            ),
          ),
          Spacer(),
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(), // 테두리
              labelText: 'Input Text Field with Outline'
            ),
          ),
          Spacer(),
        ],
      )
    );

CheckBox, Switch

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Spacer(),
          Checkbox(
            value: isChecked,
            onChanged: (value) { // 체크하게 되면
              setState(() {
                isChecked = value; // 체크한 값(true)으로 상태변경
              });
            },
          ),
          Spacer(),
          Switch(
            value: isChecked,
            onChanged: (value) { // 체크하게 되면
              setState(() {
                isChecked = value; // 체크한 값(true)으로 상태변경
              });
            },
          ),
          Spacer(),
        ],
      )
    );

Radio/RadioListTile

enum Gender {MAN, WOMEN}

class _MyHomePageState extends State<MyHomePage> {

  Gender _gender = Gender.MAN;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.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(
                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;
                  });
                },
              ),
            ],
          )
        )
      )
    );
  }
}

ListTile(상단2개)는 라디오버튼쪽만 눌러야 클릭되고 RadioListTile(하단2개)는 해당 Row 중 어디든 눌러도 클릭된다.

DropDownButton

여러개의 항목 중 하나를 고를 때 사용하는 콤보박스 형태 위젯

class _MyHomePageState extends State<MyHomePage> {

  final _items = ['apple', 'orange', 'melon', 'strawberry'];
  var _selected = 'apple';

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              DropdownButton(
                value: _selected,
                items: _items.map(
                  (value) {
                    return DropdownMenuItem(
                      value: value,
                      child: Text(value)
                    );
                  }
                ).toList(),
                onChanged: (value) {
                  setState(() {
                    _selected = value;
                  });
                },
              )
            ],
          )
        )
      )
    );
  }
}