플러터, flutter) Form 다시 간단하게 정리하기

1. Form > 다중 텍스트 inputfield 한번에 컨트롤이 가능하다.

 - child에 column 등을 통해 여러개의 TextFormField를 넣을 수 있다.

 

2. TextFormField에는 vaildator, onSave 등의 callback이 있다.

 

3. Form에는 key라는 속성이 있고,

 우리는 GlobalKey<FormState> 위젯을 만들어서  key에 할당한다.

 

4. 그리고 그 key 레퍼런스를 통해 .save(), .validate 등을 실행한다.

 

이런식으로 버튼을 눌렀을 때, key에서 모든 textformfield의 validator를 실행하고,

통과하면 모든 textformfield의 onSave 콜백을 실행시키게 한다.

 

 

<참고> FocusScope.of(context).unfocus(); 는 눌린 위젯의 focus를 풀어버리는 기능인데,

여기서는 버튼을 누르면 소프트키를 사라지게 해주는 역할을 한다!!

 

 

<참고2> sign up <=> login 모드를 바꾸면서, textformfield하나를 없애도록 했는데(username),

자세히 보면 username이 사라지면서 값도 함께 사라져야하는데,

password값이 사라지고, username의 값이 password로 올라가는 것을 볼 수 있다.

이거 기억하는가? 이 버그는, flutter에서 element tree였나가 제대로 인식을 못해서 생기는 문제!

해결방법은 바로 KEY!

 

이런식으로 valueKey를 만들어서 할당했는데 valuekey는 우리가 직접 하드코딩해서 key값을 입력할 수 있다.

하드코딩하기 싫다면, UniqueKey 위젯을 넣어도 된다.

 

key를 넣으니까,

값이 잘 따라다닌다

굿굿

 

 

참고로 이 현상에 대해 자세히 다룬 글이 있어서 첨부한다.

https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

Keys! What are they good for?