[Flutter] 3. TextField 위젯 - 폼(Form) 입력값 유효성 검사하기

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로

저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다.

* 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다.

* 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :)

---

이번에는 TextField 위젯의 입력값의 유효성을 검사해보겠습니다.

먼저 TextField 위젯은 사용자로부터 키보드 입력을 받는 기본적인 위젯입니다.

 

제가 진행중인 프로젝트에서 TextField 위젯을 사용한 모습입니다.

몇가지 설정을 해주어서 기본 모습과는 다른 디자인이지만 이렇게 입력을 받는 위젯입니다.

 

곡제목, 가수를 입력받는 곳에 사용된 위젯이 TextField 위젯입니다.

지금 곡 제목에 '필수 입력값' 이라고 라벨을 붙여두었습니다.

하지만 실제로는 아무 입력값을 넣지 않아도 기능상에 문제가 없습니다.

그래서 이 텍스트필드 위젯에 아무 값을 넣지 않으면 에러가 나도록 해보겠습니다.

이런식으로 '텍스트 필드에 개발자가 의도한 유효한 값을 입력했는지 확인하는 것'을 유효성 검사라고 합니다.

---

1. GlobalKey를 가진 Form 만들기

우선 Form 위젯을 만들어야 합니다.

html의 폼 태그와 유사하게 Form 위젯은 다른 폼 필드 위젯들의 컨테이너 역할을 하면서, 유효성도 검사합니다.

폼 위젯을 만들 때는 GlobalKey를 주어야 하는데, 폼 위젯을 구별하기 위한 식별자이면서,

이후 단계에서 폼 유효성을 검사하는데 사용됩니다.

저는 네이티브에서 사용되던 view의 id 정도로 이해했습니다.

 

FormState 클래스로 구체화된 GlobalKey 객체를 만듭니다.

 

그리고 유효성을 검사할 폼 위젯을 만듭니다.

사실 위 프로젝트에서 유효성검사는 '곡 제목' 입력만 하면되지만,

나중에 다른 폼 필드에서도 유효성 검사가 필요할 수도 있으므로, 모두 묶어서 하나의 폼에 넣겠습니다.

 

이렇게 Column 위젯을 Form 위젯으로 감싸주어, 폼 위젯 내부의 모든 폼 필드에 대해

유효성을 검사하도록 하였습니다.

 

그리고 key 속성에 아까 만들어둔 키를 넣어줍니다.

 

이제 '곡 제목'을 입력하는 텍스트 필드의 유효성을 검사할 수 있습니다.

---

2. 폼(Form)에 TextFormField 위젯 추가하기

TextField의 유효성을 검사하기 위해서는 TextFormField 위젯을 사용해야합니다.

 

기존에 사용중이던 TextField 위젯 대신, TextFormField 위젯을 사용하겠습니다.

TextFormField 위젯은 TextField 위젯에 폼 유효성검사 기능이 추가된 위젯입니다.

 

그래서 이렇게 위젯이름을 바꾸더라도 아무 오류가 없습니다.

내부 구성물은 TextField와 대부분 겹치니까요

 

유효성을 검사하기 위해 validator 속성에 유효성 검사 함수를 추가합니다.

 

String? 을 인자로 갖고, String? 을 리턴하는 함수를 넣어줍니다.

저 ? 는 '널(null) 값이 허용된다' 는 의미입니다.

String을 리턴하든지 null을 리턴하든지 고를 수 있다는 의미죠.

 

그래서 저 타입은 'String이나 null을 리턴하는 함수' 또는 null을  validator에 넣을 수 있습니다.

편하게 익명함수로 작성하겠습니다.

 

하지만 아직 이걸로는 끝나지 않습니다.

폼을 제출할 때 입력값을 검사해야하는데, 현재 상태로는 유효성 검사를 자동으로 하지 않습니다.

---

3. 버튼을 클릭시 유효성 검사하기

OK 버튼을 누르면 폼의 유효성을 검사하고,

폼이 유효하다면 원래 OK 버튼을 눌렀을 때 수행하려던 기능을 수행하도록 해보겠습니다.

 

기존 OK 버튼은 폼에 입력된 값을 가지고 새로운 화면을 띄우는 버튼 이었습니다.

이제 폼에 입력된 값의 유효성을 검사한 후, 유효하다면 해당 값을 이용해 화면을 띄우고자 합니다.

 

이때 아까 만들었던 GlobalKey를 활용합니다.

 

다음과 같이 작성합니다.

_formKey.currentState!.validate() 메소드를 이용합니다.

_formKey.currentState() 메소드는 글로벌 키에서 만들었던 FormState에 접근하는 메소드입니다.

이 FormState 위젯은 validate() 메소드를 가지는데,

말 그대로 자신 내부의 모든 폼 필드에 대해 유효성을 검사하라는 뜻입니다.

각각의 폼 필드는 아까 작성한 validator 유효성 검사 함수를 호출하여 유효성을 검사합니다.

 

자신 내부의 모든 폼 필드에 대해 유효성을 검사하다가, 하나라도 유효하지 않게되면 

에러메세지를 띄우기 위해 폼 내부를 다시 빌드하고, false를 리턴합니다.

모두 유효하다면 true를 리턴합니다.

 

그래서 저렇게 if문에 넣어 true를 리턴하면 내가 원하는 기능을 수행하도록 할 수 있습니다.

 

실제로 실행한 모습은 다음과 같이 됩니다.

 

곡 제목을 입력하지 않고 OK버튼을 눌렀더니 곡 제목은 필수 입력값이라는 에러메세지를 띄워줍니다.

여기에서 더 편리하게 하려면, 에러메세지를 띄움과 동시에 이 위젯에 포커스를 주면 더 좋을 것 같네요.

 

이렇게 입력값을 주고 OK를 누르면

 

의도한 대로 새 화면이 떠집니다.

'테스트'라고 아까 입력했던 곡 제목 데이터도 잘 전달이 되었네요