TextField 위젯 사용법과 유의점 (중요!)

해당 위젯은 TextFormField와 더불어 사용자의 입력을 받는 위젯이다. 

 

1. 사용법 (속성 설정)

1.1. decoration

       - decoration : InputDecoration(hintText : "문자열", labelText:"문자열")

       - hinttext 는 입력이 없을때 보이다가 입력하면 사라지는 placeholder 이다.

       - labeltext 는 상단에 계속 남아 있는다. 

 

1.2. onChanged 혹은 나머지 이벤트들

       - onChanged : (text) => {  text값 이용. 글자가 바뀔때 마다 이벤트가 들어옴 }

 

1.3.keyboardType

      - TextInputType.number 등 숫자, 문자등 원하는 입력을 지정할 수 있다. 

 

1.4. controller 

        - TextEditingController 변수를 배정해야 하고, 해당 변수는 Widget build 외부, State 클래스 외부에 선언 되어 있어야 한다.

        - 처음 진입시 기본 text를 표시하기 위해선, TextEditingController.text 에 값을 배졍해야 한다. 

 

 

2. 유의점

     - 위에 살짝 설명했지만, TextEditingController의 text 변수에 따라 해당 위젯의 텍스트가 표시된다.

     - 모바일에서 키보드가 떳다가 사라질 때 마다 위젯이 다시 그려진다!!

     - 따라서 TextEditingController의 text를 초기화 하는 코드를 Stateless 위젯 안에 넣거나, 

        State의 Widget build 함수 내부에 넣을 경우, 텍스트가 사라지는 문제가 발생한다!

 

이것때문에 한참을 헤멨다...

플러터에서 위젯을 다시 그리는 일은 빈번하게 일어나므로, 비단 이 부분 말고도 맴버변수를 써야 하는 일이 있다면

초기화 되지 않는 위치에서 해당 맴버변수를 초기화 해야 한다.