[Flutter] 텍스트필드를 키보드가 가릴 때 해결법 Solution for when the keyboard covers the TextField (feat. ScreenUtil)

텍스트필드가 입력을 받는 와중에 키보드가 이를 가리는 경우가 있다.
키보드가 이를 가리지 않도록 하는 방법은 아래와 같이 따라하면 된다.

 

공통 : Scaffold 위젯의 resizeToAvoidBottonInset 옵션을 true로 선언. (이게 디폴트이긴하다.)

ENG :[

Sometimes, the keyboard can cover the text field while it is receiving input. To prevent the keyboard from obscuring the text field, you can follow the steps below:
Common: Declare the resizeToAvoidBottomInset option of the Scaffold widget as true. (This is the default setting.)

]

Scaffold(
	resizeToAvoidBottomInset: true, //false는 키보드 올라와도 위젯에 변화 없음.
)

1. Column 위젯을 사용하여 적층식으로 입력을 받아야하는 경우, Column 위젯을 SingleChildScrollView로 감싸서 레이아웃의 사이즈가 변해도 Column 위젯의 Children들이 오류가 나지 않도록 해야한다.
2. Stack 위젯을 사용하여 포지션식으로 입력을 받아야하는 경우에는 Positioned 위젯의 bottom 파라미터가 키보드 최상단과 릴레이션이 되어 있다고 보면 편하다. bottom:0을 기준으로 보여야되는 부분 만큼 +- 시켜주면 된다.
**3. 특별히 ScreenUtil 패키지를 통해서 반응형을 사용하고 있는 경우에는 ScreenUtil의  useInheritedMediaQuery를 true로 선언해줘야한다. 그래야 키보드로 인한 bottomInset을 인식하고 레이아웃이 변하는 것을 감지한다. 

 

ENG:[

1. When using the Column widget to receive input in a stacked manner, it's important to wrap the Column widget with SingleChildScrollView. This ensures that the layout's size changes do not cause errors for the children of the Column widget.

2. When using the Stack widget for position-based input, it is helpful to consider the relationship between the Positioned widget's bottom parameter and the top of the keyboard. You can adjust the value of bottom relative to the part that needs to be displayed based on a reference point of bottom: 0.

**3. If you are specifically using the ScreenUtil package for responsive design, it's necessary to declare the useInheritedMediaQuery parameter of ScreenUtil as true. This allows the recognition of bottomInsets caused by the keyboard and detects layout changes accordingly.

]

ScreenUtilInit(
	useInheritedMediaQuery: true,
)