[Flutter] Widget / 위젯 - 입력용 위젯

 

입력용 위젯

 

 

TextField

글자를 입력받는 위젯. inputDecoration 클래스와 함께 사용하면 힌트 메세지나 외곽선 등의 꾸밈 효과 추가 가능.

body: Center(
            child: Column(
              children: <Widget>[
                // 기본 형태
                TextField(), 
                // 힌트 표현
                TextField(
                  decoration: InputDecoration(
                    labelText: '여기에 입력하세요',
                  ),
                ),
                // 외곽선 추가
                TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(), // 외곽선
                    labelText: '여기에 입력하세요',
                  ),
                ),
              ],
            ),
        )

총 세가지 예제다

 

---

 

CheckBox와 Switch

설정 화면 등에 많이 사용되는 체크박스, 라디오 버튼, 스위치를 표현하는 위젯.

둘은 모양만 다를 뿐 사용 방법은 동일하다.

 

bool isChecked = false;



body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Checkbox(
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  if(value != null)
                    isChecked = value;
                }
                );
              },
            ),
            Switch(
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  if(value != null)
                    isChecked = value;
                }
                );
              },
            ),
          ],
        ),
      )

위에서 봤던 TextField 예제에서 Center 안에 Column을 넣어도 horizontal 정렬만 될 뿐, vertical한 가운데 정렬까지는 적용되지 않았다.

 

따라서 바로 위 예제 코드는 Column 안에 아래의 코드를 추가하여, 가로/세로 완벽한 가운데 정렬을 구현했다.

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

참고 : https://stackoverflow.com/questions/51545768/flutter-vertically-center-column

 

클릭할 때 마다 상태가 바뀐다.

 

---

 

 

Radio와 RadioListTile

선택 그룹 중 하나를 선택할 때 사용.

어디까지를 터치 영역으로 볼 것이냐에 따라서 Radio 또는 RadioListTitle을 사용하게 된다.

 

enum Gender { MAN, WOMEN }

Gender _gender = Gender.MAN;


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(() {
                        if (value != null) _gender = value as Gender;
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text('여자'),
                  leading: Radio(
                    value: Gender.WOMEN,
                    groupValue: _gender,
                    onChanged: (value) {
                      setState(() {
                        if (value != null) _gender = value as Gender;
                      });
                    },
                  ),
                ),
                SizedBox(
                  height: 40,
                ),
                RadioListTile(
                    title: Text('남자'),
                    value: Gender.MAN,
                    groupValue: _gender,
                    onChanged: (value) {
                      setState(() {
                        if (value != null) _gender = value as Gender;
                      });
                    }),
                RadioListTile(
                    title: Text('여자'),
                    value: Gender.WOMEN,
                    groupValue: _gender,
                    onChanged: (value) {
                      setState(() {
                        if (value != null) _gender = value as Gender;
                      });
                    })
              ])))

 

 

겉으로 보기엔 둘이 같아보이지만, 위 라디오 버튼은 '버튼' 클릭만으로만 가능하고

아래 라디오 버튼은 가로 영역 전체를 클릭으로 인식한다.

 

---

 

DropDownButton

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

  final _valueList = ['첫 번째', '두 번째', '세 번째'];
  var _selectedValue = '첫 번째';
  
  
  body: DropdownButton(
        value: _selectedValue,
        items: _valueList.map((value) {
          return DropdownMenuItem(
            value: value,
            child: Text(value),
          );
        },).toList(),
        onChanged: (value) {
          setState(() {
            if(value != null)
              _selectedValue = value as String;
          });
        },
      )

 

map() 함수를 사용하여 값 리스트를 위젯 리스트로 변환하는 코드가 자주 사용된다.

 

서적 : 오준석의 플러터 생존코딩