[Flutter] (Project) MapleApp: 24. 예외 처리 작업-3

🥕 TextFormField가 focus에서 focusout 상태가 됐을 때, validator 호출

일단 validator를 호출하기 전에 TextFormField에서 focusout 상태를 만드는 것이 중요하다. 앱 키보드는 뒤로 가기, 또는 done을 눌러야 키보드가 사라지는데 보통의 사용자는 화면의 빈 부분을 클릭하여 focus를 해제하려 한다.

 

※ reference : https://api.flutter.dev/flutter/widgets/FocusScope-class.html

 

FocusScope class를 활용하면 Widget에 대해 unfocus를 진행할 수 있다.

 

두 요소를 결합하여, 전체 화면을 GesturDetector로 감싸주고 배경이 클릭 됐을 시, unfocus를 위한 method를 실행해주면 된다.

FocusScope.of(context).unfocus(),

여기서 중요한 점은, 전체 화면에 대해 GesturDetector가 작동해야 되기 때문에, Page Widget의 최상단에 배치되어야 한다는 것을 조심하자.

 

하지만 나는 계속 이벤트 버블링 되는 효과가 났다. 그러나 이벤트 버블링은 JavaScript에만 존재하지 Dart에는 존재하지 않는다.

 

결국 이유는, TextFormField에 할당하는 key가 build method 내부에서 선언되었기 때문이다. 특정 이야기로는 StatefulWidget 내부에서는 GlobalKey를 사용하지 말라 선언합니다. 조심하십시오.

 

🥕 자세한 Validation 구현 예시

if (value == null || value.isEmpty) {
  return '닉네임을 입력해주세요.';
} else if (value.contains(RegExp(r'[^0-9a-zA-Z가-힣]'))) {
  return '올바른 닉네임을 입력해주세요.';
} else if (value.contains(RegExp(r'[0-9a-zA-Z]')) && !value.contains(RegExp(r'[가-힣]')) && value.characters.length < 4) {
  return '영문과 숫자조합 닉네임은 4글자 이상 입력해주세요.';
} else if (value.contains(RegExp(r'[0-9a-zA-Z]')) && value.contains(RegExp(r'[가-힣]')) && value.characters.length < 3) {
  return '조합된 닉네임은 3글자 이상 입력해주세요.';
} else if (value.length < 2) {
  return '닉네임은 2글자 이상 입력해주세요.';
}