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() 를 통해 사용자의 입력 값을 얻는다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Text("Plain TextField:$_field1text"), | |
TextField( | |
onChanged: (text) { | |
setState(() { | |
_field1text = text; | |
}); | |
}, | |
) |

TextField, obsecureText
입력받은 문자열을 가려서 보여준다. password 입력의 예.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
TextField( | |
cursorColor: Colors.red, | |
cursorWidth: 4.0, | |
maxLength: 10, | |
obscureText: true, | |
onChanged: (text) { | |
print(text); | |
}, | |
onSubmitted: (text) { | |
print('Submitted:$text'); | |
}, | |
), |


TextField, decoration
TextEditingController 를 사용하여 입력 데이터를 얻는다.
addListner() 를 통해 초기화를 해주고 더이상 필요 없을 시 별도로 dispose() 를 해줘야 한다.
InputDecoration 를 사용하여 입력칸의 모양을 꾸민다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | |
), | |
), | |
} | |
} |
