플러터 - TextField

본 글은 [Do it! 깡샘의 플러터&다트 프로그래밍] 의 내용을 발췌한 것입니다.

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

 

텍스트 필드(TextField)는 사용자에게 글을 입력받는 위젯입니다. 입력된 글을 출력해야 하므로 Text 위젯에서 살펴본 TextAlign, TextStyle 등으로 출력할 문자열을 정렬하거나 스타일을 지정할 수 있습니다.

TextField(
	style: TextStyle(fontSize: 15),
	textAlign: TextAlign.center
)

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.

 

 

 

입력된 데이터 얻기 — TextEditingController

텍스트 필드에 사용자가 입력한 글은 프로그램으로 가져와 서버에 전송하거나 데이터베이스에 저장하는 등 다양하게 이용됩니다. TextEditingController를 이용하면 텍스트 필드에 입력된 데이터 획득, 변경 이벤트 감지 등의 작업을 할 수 있습니다.
TextEditingController 객체를 TextField의 controller 속성에 지정하면 텍스트 필드에 입력된 데이터가 자동으로 TextEditingController에 저장됩니다. 그러므로 텍스트 필드에 입력된 데이터를 가져오려면 TextEditingController의 text 속성을 이용하면 됩니다.

class TextState extends State<TestScreen> {
	final controller = TextEditingController();
	... (생략) ...
	@override
	Widget build(BuildContext context) {
		return Column(
			children: [
				TextField(
					style: TextStyle(fontSize: 15.0),
					controller: controller,
				),
				ElevatedButton(
					child: Text('submit'),
					onPressed: () {
						print('submit : ' + controller.text);
					},
				),
			],
		);
	}
}

버튼을 클릭하는 순간 TextEditingController에 저장된 데이터를 가져오는 예인데, 만약 텍스트 필드에 한 자 한 자 입력될 때마다 처리해야 할 로직이 있다면 addListener() 함수로 데이터가 변경될 때마다 실행할 함수를 지정하면 됩니다.
예를 들어 다음처럼 initState() 함수*에 controller.addListener(_printValue)라고 지정하면 controller가 등록된 텍스트 필드에 값이 변경될 때마다 _printValue 함수가 자동으로 호출됩니다. 그리고 더 이상 텍스트 필드에 값을 감지할 필요가 없다면 dispose() 함수를 호출합니다.

@override
void initState() {
	super.initState();
	controller.addListener(_printValue);
}
@override
void dispose() {
	super.dispose();
	controller.dispose();
}

꾸미기 — InputDecoration
텍스트 필드에 라벨이나 테두리를 설정하는 등 다양하게 꾸미려면 decoration 속성에 Input Decoration 객체를 지정합니다. InputDecoration의 속성 몇 가지를 소개하면 다음과 같습니다.

•labelText: 라벨 문자열
•helperText: 아래쪽에 출력되는 설명 문자열
•hintText: 입력 상자 안쪽에 출력되었다가 글 입력 시 사라지는 문자열
•errorText: 아래쪽에 출력되는 오류 문자열
•prefixIcon: 입력 앞 부분에 고정으로 출력되는 아이콘 이미지
•counterText: 아래쪽에 출력되는 문자열
•border: 테두리 지정. OutlineInputBoarder, UnderlineInputBoarder 중 하나 이용

errorText는 사용자 입력 오류처럼 오류가 발생할 때 출력할 문자열입니다. errorText를 지정하면 텍스트 필드의 테두리는 자동으로 빨간색이 되며 helperText에 지정한 문자열은 출력되지 않습니다. 다음 코드에서 주석을 해제하면 예제 아래 실행 결과에서 오른쪽 화면처럼 나옵니다.

TextField(
	style: TextStyle(fontSize: 15.0),
	controller: controller,
	decoration: InputDecoration(
		labelText: 'Name',
		prefixIcon: Icon(Icons.input),
		border: OutlineInputBorder(),
		hintText: "Hint Text",
		helperText: "이름을 입력하세요.",
		counterText: "$textCounter characters",
		// errorText: "error text"
	)
),

액션 버튼 — textInputAction

TextField에 글을 입력하려고 포커스를 주면 화면 아래쪽에서 소프트 키보드(SoftKeyboard)가 자동으로 올라오며 사용자는 이 키보드로 글을 입력합니다. 소프트 키보드는 플랫폼(안드로이드나 iOS)에서 제공하며 사용자가 키를 눌렀을 때 텍스프 필드에 글이 입력되지만 앱에서 키를 직접 제어할 수는 없습니다.
그런데 소프트 키보드에서 오른쪽 아래에 있는 액션 버튼만은 앱에서 제어할 수 있습니다. 즉, 액션 버튼을 엔터, 전송, 포커스 이동 등으로 동작하도록 설정할 수 있습니다. textInput Action 속성에 다음의 상수를 대입해 설정합니다.

•TextInputAction.next: 다음 위젯으로 포커스 이동
•TextInputAction.previous: 이전 위젯으로 포커스 이동
•TextInputAction.search: 검색 버튼
•TextInputAction.send: 전송 버튼

 

TextField(
	style: TextStyle(fontSize: 15.0),
	controller: controller,
	decoration: InputDecoration(
		... (생략) ...
	),
	textInputAction: TextInputAction.search,
),

키보드 유형 — keyboardType

소프트 키보드가 나타날 때 키보드 유형을 설정할 수 있습니다. 기본은 문자열을 입력하는 키보드로 나타나지만, 숫자만 입력해야 하는 곳에서는 숫자 키보드가 나타나게 할 수 있습니다. 이처럼 사용자가 텍스트 필드에 데이터를 입력할 때 어떤 키보드 유형으로 보일지는 keyboardType에 다음의 상수로 설정합니다.

•TextInputType.number: 숫자 입력
•TextInputType.text: 문자 입력
•TextInputType.phone: 전화번호 입력
•TextInputType.emailAddress: 이메일 주소 입력
•TextInputType.url: URL 입력

 

TextField(
	style: TextStyle(fontSize: 15.0),
	controller: controller,
	decoration: InputDecoration(
		... (생략) ...
	),
	// textInputAction: TextInputAction.search,
	keyboardType: TextInputType.number,
),

텍스트 감추기 — obscureText

사용자가 입력하는 글이 텍스트 필드에 ****처럼 보여야 할 때가 있습니다. 보통 비밀번호처럼 보안과 관련된 텍스트를 감춰야 할 때입니다. 이 기능은 obscureText 속성을 true로 설정하면 됩니다.

TextField(
	style: TextStyle(fontSize: 15.0),
	... (생략) ...
	obscureText: true,
),

여러 줄 입력 — maxLines, minLines

사용자 입력은 한 줄이 기본입니다. 그런데 여러 줄을 입력해야 할 수도 있습니다. 이때 maxLines와 minLines를 사용합니다. 둘은 꼭 함께 사용해야 하는 것은 아니며 maxLines만 사용해도 여러 줄을 입력할 수 있습니다. 예를 들어 maxLines: 3으로 설정하면 텍스트 필드가 3줄 크기로 나오지만 그 안에서 세로로 여러 줄을 입력할 수 있습니다.
그런데 minLines와 함께 사용하면 텍스트 필드가 화면에 출력될 때 minLines에 설정한 줄 수 크기로 출력되다가 글을 채우면 maxLines에 설정한 크기만큼 늘어납니다. 예를 들어 minLines: 2와 maxLines: 5로 지정하면 처음에는 2줄 입력 크기로 출력되고 사용자의 입력에 따라 최대 5줄까지 늘어납니다.

TextField(
	style: TextStyle(fontSize: 15.0),
	... (생략) ...
	minLines: 2,
	maxLines: 5,
),

 

 

 

책의 모든 내용을 저자 직강으로 진행한 강의는 ssamz.com 에서 들으실 수 있습니다.