Topic

TextField 를 사용하다 textfield 끼리 충돌이 발생되는 문제를 작성해보았다.

Problem

TextField를 터치할 때마다 레이아웃 재빌드 문제.

Solve

[TextField] - Flutter API 공식문서 중 일부.

A material design text field.

A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.

The text field calls the [onChanged] callback whenever the user changes the text in the field. If the user indicates that they are done typing in the field (e.g., by pressing a button on the soft keyboard), the text field calls the [onSubmitted] callback.

To control the text that is displayed in the text field, use the controller. For example, to set the initial value of the text field, use a controller that already contains some text etc..... To integrate the TextField into a Form with other FormField widgets, consider using TextFormField.

요약 : TextField 는 하드웨어 키보드나 onScreen 키보드를 이용해서 작성할 수 있는 위젯이다.

onChanged, onSubmitted 를 활용해서 유저의 텍스트 등을 바꿀수도 그리고 나타낼수도 있는 기능을 가지고 있다..

마지막으로 control을 이용해서 textfield를 초기화 시킬 수 있다.. TextFormField 를 사용해보는 것도 고려해라.

필자는 TextField만 사용해서 개발해왔지만 이번에 겪은 문제는 처음이었다.

TextField가 충돌되는 문제였다. TextField를 클릭했을때 TextField와 관련되어 있는 모든 위젯들이 재빌드 되는 문제였다.

우선 TextField는 build()메서드를 자동적으로 불러온다 클릭했을때...즉 모든 메서드가 build메서드 내에서 계속 초기화 된다는 것이다. 그렇기 때문에 TextField를 구분하지 않고 관련되어 있는 위젯이 계속적으로 빌드되는 상황이었던 것이다.

때문에 아래와 같이 세가지의 해결책으로 해결을 진행했다.

[첫번째] GlobalKey를 선언해주고 Form에 key값을 부여해주는 방법이다. 이렇게 되면 Form에 고유한 키값이 부여 되기 때문에 구분할 수 있다.

[두번째] 방법은 부모 위젯내에서 자식 위젯을 직접적으로 선언하지 않는것이다.

위와 같이 선언하게 되면 ParentState.build()를 시도하고 나서 새로운 자식 인스턴스를 생성하게 된다는 것이다. 결국 부모 위젯내에서 부모위젯만의 상태만 가지고 있어야 되는데 결국 자식 위젯의 상태까지 같이 가지고 있는 셈이된다.
즉 중첩되게 사용하지 말라는 뜻이다 이렇게 사용해야 될 경우

클래스를 담을 변수를 생성해주고 initState를 통해서 초기화 해주고 사용하면 된다.

세번째 방법은 MediaQuery에 의존하지 않는것이다.
MediaQuery에 의존하게 되면 키보드 팝업이 화면 크기를 변경하여 MediaQuery가 재호출 된다. 즉 이런 경우 만약 build()메서드 아래에서 부르고 있다면 키보드 화면 때문에 사이즈가 계속 변경된다는 뜻이다.

이럴경우 screenUtil, sizer 등을 사용해서 Responsive한 UI를 구축하는게 도움이 될 수 있다.

Result

최근에 계속 TextField 문제로 삽질의 시간을 가지고 있다.
의미 없는 시간이라고 생각하지 않는다.
현재 개발하고 있는 어플리케이션의 7할은 이 기능이 다하고 있는 만큼 굉장히 신중해야 된다고 생각한다.

하지만 아직도 모르는게 많은거 같다 key의 사용과 Flutter FrameWork가 어떻게 판별하는지 Element 요소는 어떻게 판단하는지 아직 더 많이 공부해야 된다고 생각한다.