[Flutter] 3. TextField 위젯 - 입력텍스트와 underline 간격 줄이기

플러터의 TextField 위젯을 기본값으로 실행시키면 다음과 같은 모습으로 나온다.

빨간색 네모로 표시한 부분을 보면

곡 제목과 그 아래 밑줄 사이의 간격이 꽤 넓다.

 

이 간격을 줄이는 방법을 알아내기 위해 구글을 미친듯이 검색했고, 플러터 공식 API 문서도 열심히 뒤졌다.

그리고 직접적인 답은 찾지 못했지만, 검색해서 얻은 정보들을 조합하여 답을 알아냈다...

 

저 간격을 조정하려면 TextField위젯의 decoration 속성에  TextInputDecoration() 객체를 설정하여

달아주어야 한다는 것을 검색을 통해 알게되었다.

 

그리고 안드로이드 스튜디오를 이용하여, 저 TextInputDecoration() 객체에 설정할 수 있는 모든 속성을

샅샅히 살펴본 결과 contentPadding 이라는 속성을 찾아냈다.

 

그리고 그 속성에 패딩값을 설정해주었다.

 

이렇게 설정해주었다. 바텀의 패딩값을 다른 쪽보다 작게 주었다.

하지만 실행해보니 결과는 그대로.....

내가 패딩값을 너무 크게 줬나 싶어서 극단적으로 바텀 패딩값을 0으로 주었다.

 

그리고 이게 실행결과다...

TextField 위젯의 높이값이 줄어든듯한 변화만 보여주고, 아랫줄과 내용물 사이 간격은 변한게 없다.

여기에서 멘붕이 와서 검색만 미친 듯이 했다.

 

아무리 설정해도 저 간격이 줄어들질 않아서 아예 설정자체가 불가능 한건가 싶었다.

그러다가 InputDecoration 객체의 isCollapsed 속성을 true로 하면 간격을 없앨 수 있다는 글을 봤다.

 

간격이 줄어들었다!! 근데 이건 너무 가깝다...

매우 극단적이다

 

그리고 안드로이드 스튜디오에서 이걸 보게 되었다.

 

만약 isCollapsed가 true 라면, contentPadding 값을 EdgeInsets.zero 로 만듭니다!

EdgeInsets.fromLTRB(0,0,0,0)과는 다른건가..?

 

그러다 혹시나 하는 마음에 isCollapsed 속성을 true로 넣고,

이 상태에서 EdgeInsets.fromLTRB 속성을 추가로 넣어보았다.

 

그러자 드디어 내가 원하는 대로 되었다.

 

딱 이렇게 텍스트를 입력하면 네모 박스에서 '곡 제목' 라벨을 제외한 높이의 딱 가운데에 텍스트가 위치한다.