[Flutter] 다음 Text Field로 포커스를 넘기는 방법

 

다음 버튼 클릭 시 다음 텍스트 필드로 포커스 넘기기

비밀번호 변경 시 새 비밀번호 입력 후, 키보드의 다음 버튼이 완료버튼으로 변경되며 텍스트 필드 포커스가 넘어가는 액션을 주려고 한다. 

 

🧭 기능정리

1. 키보드 다음버튼을 완료버튼으로 변경하는 기능
2. 텍스트 필드 포커스가 다음으로 넘어가는 기능

두가지 기능이 필요하다!

비밀번호를 입력하고 다음 버튼을 누르면

완료 버튼으로 변경되며 비밀번호 확인 텍스트필드가 포커스 된다

🧭 사용코드 미리보기

TextField(
      textInputAction: TextInputAction.next,
      onSubmitted: (_) => FocusScope.of(context).nextFocus(),
);

textInputAction 

키보드 버튼 상태를 변경하기 위해 TextInputAction을 사용한다. 

👉 textInputAction: TextInputAction.next  다음 버튼으로 표시합니다

TextField(
      textInputAction: TextInputAction.next,
);

TextInputAction.next

👉 textInputAction: TextInputAction.done  완료 버튼으로 표시합니다

TextField(
      textInputAction: TextInputAction.done,
);

TextInputAction.done

onSubmitted

텍스트 필드 포커스가 다음으로 넘어가게 하기 위해서 상태값 변경을 위한 onSubmitted 기능을 사용합니다.

👉 nextFocus() : 다음 텍스트필드로 넘어가기

TextField(
         onSubmitted: (_) => FocusScope.of(context).nextFocus(),
)

👉 unfocus() : 활성화 끄기

TextField(
         onSubmitted: (_) => FocusScope.of(context).unfocus(),
)

 

참고: https://stackoverflow.com/questions/52150677/how-to-shift-focus-to-next-textfield-in-flutter

How to shift focus to next textfield in flutter?

 

 

 

 

추가+ 페이지 들어오자마자 텍스트 필드 활성화

TextField(
      autofocus: true
);

가장 먼저 활성화하고 싶은 텍스트필드에 autofocus : true 를 사용합니다.