Flutter

Flutter : TextField

iosroid 2019. 9. 6. 10:42

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