Flutter : TextField

Flutter 의 텍스트 입력을 받는 위젯이다.

TextField class

TextField({Key key, TextEditingController controller, FocusNode focusNode, InputDecoration decoration: const InputDecoration(), ... })

A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.

Material Design 의 사용자의 텍스트 입력을 받을 수 있는 위젯이다.

 

 

 

Plain TextField

아래 줄만 그려지고 그 위에 문자 입력이 가능하다.

onChanged() 를 통해 사용자의 입력 값을 얻는다.

	Text("Plain TextField:$_field1text"),
	TextField(
	onChanged: (text) {
	setState(() {
	_field1text = text;
	});
	},
	)

view raw textfield3.dart hosted with ❤ by GitHub

입력값이 화면에 출력되는 예제

TextField, obsecureText

입력받은 문자열을 가려서 보여준다. password 입력의 예.

	TextField(
	cursorColor: Colors.red,
	cursorWidth: 4.0,
	maxLength: 10,
	obscureText: true,
	onChanged: (text) {
	print(text);
	},
	onSubmitted: (text) {
	print('Submitted:$text');
	},
	),

view raw textfield2.dart hosted with ❤ by GitHub

암호입력 예제

TextField, decoration

TextEditingController 를 사용하여 입력 데이터를 얻는다.

addListner() 를 통해 초기화를 해주고 더이상 필요 없을 시 별도로 dispose() 를 해줘야 한다.

InputDecoration 를 사용하여 입력칸의 모양을 꾸민다.

	class _TextFieldPage extends State<TextFieldPage> {
	final _controller = TextEditingController();
	void initState() {
	_controller.addListener(() {
	print(_controller.text);
	});
	super.initState();
	}
	void dispose() {
	_controller.dispose();
	super.dispose();
	}
	Widget build(BuildContext context) {
	// ...
	TextField(
	controller: _controller,
	decoration: InputDecoration(
	border: OutlineInputBorder(),
	hintText: 'hint',
	labelText: 'ID',
	prefixIcon: Icon(Icons.perm_identity),
	),
	),
	}
	}

view raw textfield.dart hosted with ❤ by GitHub

사각형 데코와 힌트 텍스트가 적용된 예제

Reference

Flutter Documentation