Flutter TextFormField 입력 커서가 처음으로 돌아가는 문제

문제

---

이전 글) https://programmer777.tistory.com/119

 

글자 수를 체크하는데 제한된 글자 수를 넘기면 입력 커서가 처음으로 돌아가는 문제가 발생했다.

→기대치 : 입력 커서를 끝에 위치시킨다.

 

 

원인

---

입력 커서가 처음으로 돌아가는 이유는 텍스트 필드의 'onChanged' 콜백 함수에서 텍스트를 수정할 때 커서 위치를 다시 조정하지 않았기 때문이다. 'onChanged' 콜백 함수는 텍스트 필드의 텍스트가 변경될 때 호출되며, 글자 수를 제한하는 로직을 적용하면 커서가 다시 텍스의 처음으로 이동할 수 있다.

 

 

해결

---

 

코드 부가 설명

---

입력한 문자열(text)에서 처음 10개의 문자를 선택한 것을 validatedText 변수에 넣어준다.

 

커서의 새로운 위치를 지정할 코드이다.

'TextEditingController' 객체인 controller의 selection 속성을 통해 현재 커서 위치와 관련된 정보를 가져온 다음, 'copyWith' 메서드를 사용하는 새로운 'TextSelection' 객체를 생성한다.

 

여기서 각 속성의 역할은 다음과 같다.

- baseOffset : 커서의 시작 위치를 나타냄. 여기서는 글자수 제한 숫자인 10으로 설정되어 10번째 글자부터 시작한다. 

- extentOffset : 커서의 끝 위치를 나타냄.  여기서는 글자수 제한 숫자인 10으로 설정되어 끝을 10번째 글자로 설정한다.

- affinity : 커서의 이동 방향을 나타냄. 'TextAffinity.downstream'으로 설정되어 현재 커서 위치를 유지하며 커서를 이동함  

• TextAffinity.downstream : 커서가 선택한 영역을 따라 텍스트의 흐름 방향 (아래로 흐르는 방향)을 나타낸다.

입력 중인 TextFormField에 새로운 커서 위치를 반영하기 위한 코드를 작성한다.

'TextEditingController' 객체인 controller의 value 속성(현재 상태를 반영하는 코드)에 새로운 'TextEditingValue'(새로운 커서 지정)를 할당한다.

 

TextEditingValue : TextField의 텍스트와 커시 위치를 나타내는 클래스다.

 

각 속성의 역할은 다음과 같다.

- text : 새로운 텍스트 값을 나타낸다. 이 값은 validatedText로 설정되어 처음 10자의 텍스트로 변경된다.

- selection : 커서 위치를 나타낸다. newCursorPosition 객체로 설정되어 새로운 커서 위치를 적용한다.

- composing: 텍스트의 일부를 강조 표시하는 데 사용되며, 여기서는 'TextRange.empty'로 설정되어 텍스트의 일부를 강조 표시하지 않는다.

이렇게 코드를 작성하면 입력된 텍스트의 길이를 10자로 제한하고, 커서의 위치를 10번째 위치로 이동한다.