본문 바로가기
프로그래밍/Flutter & Dart

Flutter 입력 관련 위젯

by 어느덧중반 2021. 8. 23.
반응형

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

 

요약 : 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;
                  });
                },
              )
            ],
          )
        )
      )
    );
  }
}

 

- TextEditingController

사용자에게 값을 입력받을 때 사용하는 위젯은 TextField이다.

TextEditingController를 통해서 TextField에 입력된 값을 가져올 수 있다.

 

- Form과 TextFormField 위젯을 통해 입력값을 검증할 수 있다.

TextFormField validator 프로퍼티를 활용한 검증 기능도 제공

 

반응형

댓글2

  • 초보자 2021.10.09 11:57

    안녕하세요 코딘초보자가 질문하나만 드리겠습니다
    드롭다운버튼 구현하려고 몇일동안 여기저기 돌아다니고 있는데
    계속같은 문제로 막히고있습니다 ㅜ
    소스마지막 value; 이부분은 왜자꾸 빨간줄이가고 에러가날까요 ㅜ

    답글