[Flutter] TextField Focus 이동시켜보자

안녕하세요. 오늘은 간단한 팁을 알려드리겠습니다.

UX에 관심 있는 분들이라면 한 번쯤 찾아보셨을 TextField Focus 이동시키는 법입니다.

---

주로 사용하는 곳은 전화번호 인증 화면이 있을 것 같습니다.

지구하다 앱의 인증 화면

이건 제가 개발한 지구하다 앱의 인증 화면입니다. 예시 화면으로 가져와봤습니다.

전화번호를 적고, 인증번호 전송버튼을 누르면 인증번호 TextField로 Focus가 바뀝니다. 되게 사소하지만, 유저 입장에서 좋은 UX라고 생각됩니다.

뭐 Focus 하나 가지고... 적용하지 않아도 유저 입장에서 TextField 한번 클릭하면 되는 건데...

 

라는 생각이 드실 수 있습니다. 하지만, 이러한 사소한 UX들이 모여 유저 입장에서 쓰기 편하다!라는 느낌을 받을 수 있으면, 훨씬 좋은 효과 아닐까 싶습니다.

 

이제 코드로 구현해 보겠습니다. 매우 간단합니다.

TextField에는 focusNode라는 FocusNode? 타입의 인자가 있습니다.

이 FocusNode에 대해 간단히 설명드리면, 위젯의 키보드 포커스 상태를 정의합니다. 개발자가 키보드 포커스에 관해 따로 관리할 수 있다는 말이 되겠죠.

 

본인이 Focus를 이동하고자 하는 TextField에 FocusNode를 만들어 줍니다.

FocusNode node = FocusNode();

...

TextField(
  focusNode: node
)

그리고 본인이 Focus를 이동하고자 하는 시점이 있을 겁니다. 위의 인증화면 기준으로는 인증번호 전송버튼을 눌렀을 때가 됩니다.

FilledButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(node);
  }
  child: Text('인증번호 전송')
)

위 코드에 이동하고자 하는 FocusNode를 함수에 넣어주면 됩니다. 그러면, 원하는 TextField로 Focus가 이동하는 것을 보실 수 있습니다.