[Flutter] 플러터 텍스트 에디터 위젯 - TextFormField, From, TextEdittingController, GlobalKey

플러터(Flutter)에서 텍스트를 입력받는 위젯은 크게 TextField와 TextFormField 두 가지로 나뉩니다. TextFormField 위젯은 TextField 위젯을 포함하고 있어 대부분 동일한 매개변수를 갖고 있기에 TextFormField 위젯의 사용법을 잘 익혀두시면 TextField 위젯도 쉽게 사용하실 수 있습니다. TextFormField 위젯은 유효성 검사를 하고 화면에 출력해주는 기능이 포함되어 있어서 회원가입, 로그인 등에 주로 사용됩니다.

 

 

 

 플러터(Flutter) TextFormField 소개 및 초간단 구현 방법

TextFormField 위젯 초간단 코드 및 결과화면

TextFormField 위젯은 기본 화면은 언더라인만 그려주게 되며 그곳을 클릭하면 커서가 발생되고 모바일에서는 키보드 화면이 생성되게 됩니다. 코드상에 TextEdittingController를 지정해 주면 쉽게 텍스트를 얻어오기 쉽고 텍스트 변경도 가능합니다. 확인 버튼을 클릭하게 되면 onPressed 함수를 통해 유효성 검사를 요청하게 되고 유효성 결과가 실패하게 된다면 언더라인 아래에 표시하게 됩니다. 유효성 검사 로직은 TextFormField 위젯의 validator 매개변수를 통해서 조건을 넣어주시면 됩니다. 해당 함수가 null을 리턴하면 유효성 검사를 통과하게 됩니다. 

유효성 검사 실패 화면

 

 

 

 플러터(Flutter) TextFormField 다양한 매개변수 활용 형태 변경

1. 텍스트 인풋란에 아이콘, 라벨, 힌트 만들기

아이콘, 라벨, 힌트

2. 아웃라인이 있는 텍스트 인풋 만들기

아웃라인 코드 및 결과화면

3. 글자수 제한 / 숫자 키패드 설정 / 입력문자 숨김(비밀번호)

글자수제한, 숫자키패드, 비밀번호

4. 정규식 적용하기

정규식 적용

이 외에도 다양한 매개변수 등이 있지만 많이 사용하는 것만 사용해 봤습니다. 간혹 금액을 입력할 때 콤마를 넣어줘야하는 경우가 생기는데 직접 TextEdittingController에 접근해서 계산을 해도 되자만 CurrencyTextInputFormatter라는 패키지가 존재합니다. 패키지의 경우 따로 준비할 예정이니 필요하신분들은 pub.dev 페이지에서 검색해서 사용하시면 좋을 거 같습니다.

 

 

 

 플러터(Flutter) 초보를 위한 코드의 궁금점 해결

1. GlobalKey는 뭐하는건가요?

플러터는 기본적으로 객체를 생성해서 메모리를 받아서 사용하기보다는 Bulld() 함수 내에게 직접적으로 객체의 인스턴스를 만들어서 사용하므로 해당 객체(Form)에 대한 접근을 할 수가 없습니다. 그 때문에 초기화 및 생성자에서 메모리를 저장하고 사용하는 경우도 있습니다. 하지만 메모리를 저장하고 들고 있는 방식은 플러터가 원하는 방향이 아니므로 대신 위젯 내에 Key라는 매개변수를 통해 고유키를 발생하여 변수로 들고 있으면 접근이 가능하게 됩니다. TextFormField 예제에서는 최종 확인 버튼을 누르면 유효성 검사를 해야 하기 때문에 Form위젯에 Key를 세팅하고 버튼을 누를 때 Form 위젯에 접근해서 유효성 검사 validator 함수를 진행하게 됩니다.

 

2. TextEdittingController 변수를 통해 dispose() 해주고 있는데 꼭 해줘야하는 건가요?

플러터의 컨트롤러들은 사용이 끝나면 dispose() 함수를 호출해서 메모리를 반환해 주어야 합니다. 물론 반환하지 않는다고 하여도 사용이 많지 않은 앱에서는 큰 문제점이 일어나지 않을 수 있으나 기본적으로 메모리가 쌓이게 되어 앱이 다운될 수 도 있기에 사용 후에는 메모리 해제를 하도록 권고하고 있습니다.

 

 플러터(Flutter) TextFormField 마무리

앱을 만들다보면 텍스트 인풋은 꼭 들어가는 부분입니다. 매개변수들이 많아서 다소 어렵게 느껴졌을 수도 있으나 플러터에서는 TextField, TextFormField 위젯 이게 전부이니 이번 기회에 TextFormField 위젯을 잘 정리해두시면 두고두고 사용될 것이며, TextField 위젯은 TextFormField의 하위 위젯으로 배운 거나 다름없습니다. 이제 로그인, 회원가입 화면을 만들 수 있을 거 같습니다.

 

플러터(Flutter) TextFormField 전체 소스 코드는 아래 포스팅에서 확인이 가능합니다.

[Flutter] 플러터 TextFormField 위젯 - 소스코드