Flutter: TextEditingController를 이용한 TextField Text 관리
Flutter에서 TextField의 text를 효율적으로 관리하는 방법에 대해 알아보겠습니다. 기본적으로, Flutter에서는 TextEditingController를 사용하여 TextField의 text를 관리합니다. 이는 Flutter 개발에 익숙한 분들에게는 잘 알려진 사실입니다.
TextField와 TextEditingController 동기화 필요성
그러나 때때로, 사용자가 입력한 text를 수정 후 다시 TextEditingController의 text로 넣어주어야 하는 상황이 발생합니다. 이런 경우 어떻게 처리해야 할까요? 아래에서 제가 경험했던 실제 사례를 통해 설명드리겠습니다.
사례: 가격 입력과 커서 위치 조정
사용자가 입력한 가격에 쉼표(,)를 추가하여 다시 controller의 text로 넣어주는 경우였습니다. 이 과정은 간단하게 보일 수 있지만, 문제가 하나 있었습니다. 바로 커서 위치입니다.
일반적으로 커서는 항상 맨 뒤에 위치하길 기대하지만, 위 작업을 진행할 때마다 커서가 앞으로 이동하는 문제가 발생하였습니다.
문제 해결 방법: 코드로 커서 위치 조정하기
커서가 앞으로 이동하는 것은 사용자 경험(UX) 측면에서 자연스럽지 않다고 판단되어, 직접 코드를 통해 커서 위치를 조정하도록 결정했습니다.
TextEditingController()..selection = TextSelection.fromPosition(TextPosition(offset: somePosition))
'somePosition' 부분을 자신의 요구사항에 맞게 수정하여 활용할 수 있습니다. 위 코드처럼 작성하면 됩니다.
0 개의 댓글:
Post a Comment