목차
- TextField
- TextFiled와 함께 활용되는 클래스
서론
어플리케이션의 화면을 구성할 때 사용자에게 직접 텍스트를 입력 받거나, Checkbox, Radio 버튼 등으로 데이터를 입력 받는 경우가 많습니다. 이번에는 사용자에게 데이터를 입력 받을 때 사용하는 위젯에 대해서 알아보겠습니다. 또한 Form 위젯으로 데이터 유효성을 검증하고, 관리하는 방법도 알아보겠습니다.
본문
1. TextField:
TextField는 유저에게 Text를 입력 받는 Widget입니다. style 프로퍼티의 TextStyle 객체를 이용하여 문자열의 스타일을 지정할 수 있습니다. textAlign 속성의 TextAlign 클래스가 제공하는 상수를 이용하여 텍스트를 가로 방향에서 어떻게 정렬할 지 지정할 수 있습니다. start, end, center, left, right 등의 상수를 이용하여 텍스트를 정렬할 수 있습니다. 사용 예는 아래와 같습니다:
TextField(
style: TextStyle(fontSize: 15),
textAlign: TextAlign.center
)
2. TextField와 함께 활용되는 클래스:
- TextEditingController: TextField에 User가 입력한 텍스트를 애플리케이션 내부로 가져와 서버에 전송하거나, 데이터 베이스에 저장하는 방식으로 이용할 수 있습니다. TextEditingController 객체를 TextField의 controller 프로퍼티에 지정하면 텍스트 필드에 입력된 데이터가 자동으로 TextEditingController에 저장됩니다.
코드 예시: final controller = TextEditingController()
그러므로 TextField에 입력된 데이터를 가져오려면 TextEditingController의 text 프로퍼티를 이용하면 됩니다.
코드 예시: print('submit : ' + controller.text); - InputDecoration: TextField의 테두리를 꾸며주거나, TextField에 입력을 받는 문자열과 관련된 여러가지 설정을 할 수 있는 프로퍼티를 포함하고 있습니다. InputDecoration의 주요 프로퍼티는 다음과 같습니다. 아래 표에 나타낸 바와 같이, 왼쪽 열은 프로퍼티를 나타내며, 오른쪽 열은 각각의 행의 프로퍼티에 대한 간단한 설명입니다.
| labelText | 라벨 문자열 |
| helperText | 아래쪽에 출력되는 설명 문자열 |
| hintText | 입력 상자 안쪽에 연하게 출력되었다가 글 입력 시 사라지는 문자열 |
| errorText | 아래쪽에 출력되는 오류 문자열 |
| prefixIcon | 입력 앞 부분에 고정으로 출력되는 아이콘 이미지 |
| counterText | 아래쪽에 출력되는 문자열 |
| border | 테두리 지정. |
위의 프로퍼티를 활용한 코드 예시는 다음과 같습니다.
decoration: InputDecoration(
labelText: 'Search',
prefixIcon: Icon(Icons.input),
border: OutlineInputBorder(),
hintText: "Search Bar",
helperText: "Input what you want to search",
counterText: "$textCounter characters",
errorText: "Wrong input"
- textInputAction: 사용자가 TextField에 text를 입력하기 위해서 TextField를 터치하면 모바일폰의 화면 아래쪽에서 Soft Keyboard가 자동으로 올라오면서 사용자는 이 키보드를 이용하여 text를 입력하게 됩니다. 이 키보드의 키를 앱에서 제어할 수는 없지만, 키보드의 오른쪽 아래에 있는 액션 버튼만은 앱에서 제어할 수 있습니다. textInputAction 의 프로퍼티에 다음의 상수를 대입하여 설정할 수 있습니다.
| TextInputAction.next | 다음 위젯으로 커서 이동 |
| TextInputAction.previous | 이전 위젯으로 커서 이동 |
| TextInputAction.search | 검색 버튼 |
| TextInputAction.send | 전송 버튼 |
위의 상수에 대한 코드 예시는 다음과 같습니다: keyboardType: TextInputType.number
댓글