Text 위젯의 fontSize 에 적당한 Container 위젯의 Height

Text 위젯에서는 표시할 text의 fonSIze 설정할 수 있다. 

이때 Text위젯을 감싸는 위젯의 높이(height)가 지정되어있지 않을때 자신의 child, 지금의 경우 Text 위젯의 크기를 따르게 된다. 만약 Text 위젯도  높이(height)가 정해져 있지 않을 경우 Text Widget은 표시할 text의 크기에 비례해서 커지게 된다. 

이에 따라 Text위젯을 감싸는 위젯(내 경우 SizedBox)도 크기가 따라 커지게 된다. 

위와 같이 간단한 코드를 통해 테스트 해보자. 

fontSize 값은 코드에서처럼 100을 넣었다.  한글은 '한뀰' 영어는 'Rg' 를 입력했다. 

SizedBox의 height는 아래 사진과 같이 Flutter Dev tool의 Flutter Inspector를 이용해서 확인했다. 

 

 

Pixel 2 에뮬레이터 사용했을 때

MediaQuery.of(context).textScaleFactor = 1.0 

MediaQuery.of(context).devicePixelRatio = 2.625   

	SizedBox.height	TextStyle.height	TextStyle.fontSize	SizedBox의 Height
영어	null	null	100	117
한글	null	null	100	145

	SizedBox.height	TextStyle.height	TextStyle.fontSize	SizedBox의 Height
영어	null	1	100	100
한글	null	1	100	100

 

 

삼성 갤럭시 A30 (SM A305N) 장비를 사용했을 때 

MediaQuery.of(context).textScaleFactor = 1.1

MediaQuery.of(context).devicePixelRatio = 2.625   

	SizedBox.height	TextStyle.height	TextStyle.fontSize	SizedBox의 Height
영어	null	null	100	129
한글	null	null	100	110

 

	SizedBox.height	TextStyle.height	TextStyle.fontSize	SizedBox의 Height
영어	null	1	100	100
한글	null	1	100	110

 

Pixel2와 삼성 갤럭시 A30의 결과를 비교해보면, 그 차이가 명백하다. 

삼성의 경우 한글을 렌더링(페인팅)할 영역에서 공간을 잘 활용했나? 영어를 표시할 때 보다 증가하는 size가 작다.

반대로 구글의 Pixel2는 한글을 표시할때 SizedBox의 높이 증가폭이 영어를 표기할 때보다 훨씬 크다.

 

 

결론, Text를 표시할때 Container나 SizedBox로 감싸서 크기를 고정하지 않는다면, fontSize 값을 지정했더라도 장치마다 다른 Text 출력 크기로 인해 layout에 약간의 변화가 생길 수 있다. 텍스트 출력 문제로 바깥 layout에 영향을 주지 않기 위해서는 고정된 크기를 가진 위젯으로 감싸라. 텍스트 표시 크기가 작아짐, overflow로 인한 짤림 같은 문제는 wrapping한 위젯 안에서 처리하면된다.  

 

 

 

MediaQuery.of(context).textScaleFactor = 1.1 값 때문에 문제가 발생한다. 

앱에서 text 값을 MeadiaQuery의 width와 height 를 이용한 비율 값으로 입력하더라도  textScaleFactor  때문에 글자가 위젯 밖을 나갈 수 있다.