[FLUTTER] 공백 포함된 한글에 밑줄 추가 시 밑줄 높낮이 다른 버그 해결

텍스트 버튼을 사용할 때 버튼이라는 시각적 효과를 더하기 위해 기본적으로 기본 글씨랑 색상을 다르게 넣지만, 추가적으로 텍스트에 밑줄을 많이 넣기도 한다.

style: TextStyle(
  decoration: TextDecoration.underline,
  decorationColor: Colors.green,
),

 

헌데 한글의 경우 공백이 있을 때 한글과 공백의 밑줄 높이가 다른 버그가 있다. 각 폰트마다 높이가 다른 매트릭스 어쩌구... 가 원인이다.

 

한글은 공백의 밑줄 높이가 낮지만 영문은 공백도 문제 없다.

 

사실 큰 문제는 아니지만 좀 거슬린다...

 

해당 버그를 인터넷에 찾아보면 굉장히 오래된 버그임을 알 수 있지만 여전히 나타나고 있다.

 

해결법은 TextHeightBehavior, TextPainter 등을 사용하거나 Container 를 사용해 임의로 밑줄처럼 보이게 하는 등의 여러 방법이 있는데, 아예 적용이 안되거나 오버스펙의 해결책이 대다수였다.

 

여러 공백 특수문자를 적용해보고 스페이스바 공백 대신에 넣어서 해결했다.

 

'ㅤ' (U+3164: Hangul Filler - 작은따옴표 사이에 있음)

 

기본 스페이스바 공백보다 넓어서 조금은 애매해서 글자 간격을 줄여주는걸 추가했다.

letterSpacing: -1,

 

글자 간격은 각자 기호에 맞게.

 

음... 역시 간단한게 최고!

안드로이드와, ios 모두 해결. (각자 적용된 폰트에 따라 해결 여부가 다를 수 있음. 나는 기본 폰트 사용)