1. TextField

글자를 입력받는 위젯

InputDecoration 클래스와 함께 사용하면 힌트 메세지나 외곽선등의 꾸밈 효과를 추가할 수 있다.

ezgif-3-bc6194545f41.gif

Column(
          children: [
            TextField(),    // 밑줄만 생김
            SizedBox(
              height: 100,
            ),
            TextField(
                decoration: InputDecoration(labelText: 'Myongji College')), // 밑줄과 힌트
            SizedBox(
              height: 100,
            ),
            TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: 'Myongji College'), // 외곽선과 힌트
            )
          ],
        )

2. CheckBox와 Switch

설정, 회원가입등 많이 사용되는 체크박스, 라디오 버튼, 스위치를 표현하는 위젯이다.

ezgif-3-dd06ee74a810.gif

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Myongji College"),
          backgroundColor: Colors.red[600],
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Checkbox(
                  value: _isChecked,
                  onChanged: (value) {
                    setState(() {
                      _isChecked = value!;  // 널 세이프티에 관한 내용 참조
                    });
                  },
                ),
                SizedBox(height: 40),
                Switch(value: _isChecked, onChanged: (value) {
                  setState(() {
                    _isChecked = value;
                  });
                })
              ],
            ),
          ),
        ));
  }
}

3. Radio와 RadioListTile

선택 그룹 중 하나를 선택할 때 사용하는 위젯

터치영역을 어디까지 정하냐에 따라 RadioRadioListTile을 사용한다.

ezgif-3-c8fefee9a974.gif

해당 위젯에서 발생한 오류

A value of type 'Object?' can't be assigned to a variable of type 'A'.

enum Gender { MAN, WOMEN}
enum Sex { Man, Women}

class _MyHomePageState extends State<MyHomePage> {
  Gender _gender = Gender.MAN;
  Sex _sex = Sex.Man;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Myongji College"),
          backgroundColor: Colors.red[600],
          centerTitle: true,
        ),
        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 as Gender;
                    });
                  },
                ),
              ),
              ListTile(
                title: Text("여자"),
                leading: Radio(
                  value: Gender.WOMEN,
                  groupValue: _gender,
                  onChanged: (value) {
                    setState(() {
                      _gender = value as Gender;
                    });
                  },
                ),
              ),
              RadioListTile(
                  title: Text("남자"),
                  value: Sex.Man,
                  groupValue: _sex,
                  onChanged: (value) {
                    setState(() {
                      _sex = value as Sex;
                    });
                  }),
              RadioListTile(
                  title: Text("여자"),
                  value: Sex.Women,
                  groupValue: _sex,
                  onChanged: (value) {
                    setState(() {
                      _sex = value as Sex;
                    });
                  })
            ],
          )),
        ));
  }
}

4. DropDownButton

여러 아이템 중 하나를 고를 수 있는 콤보박스 형태의 위젯이다.