Flutter - 한글 단어 단위로 line break되게 하기

Multi-line Text 위젯에 한글을 띄워줄 때 단어 단위로 줄바꿈이 안되는 상황,,, 모두 한번쯤은 이 답답함을 경험해봤을 것이다.

 

영어

한글

공식 커뮤니티에서도 약 3년전부터 관련 이슈에 대한 이야기가 계속 되고 있지만 아직까지 수정은 안된 상태.

아마도 원인은 line break처리를 담당하는 API가 CJK(한중일)텍스트의 줄 교환 위치를 정확히 계산하지 못해서인듯하다. 

 

Wrap을 이용한 workaround도 있지만 뭔가 무거운 느낌이 있어 regular expression을 찾게되었다 :

RegExp(r'(\S)(?=\S)')

이 마법의 정규표현식은 실제 각 character들이 붙어있는지 아닌지를 판단해준다.

 

replaceAllMapped를 사용하여 정규식과 match되는 위치에 ZWJ는 추가해주면 공백 기준으로 줄바꿈이 반영된다👏 :

'TEXT'.replaceAllMapped(RegExp(r'(\S)(?=\S)'), (m) => '${m[1]}\u200D');

 

replaceAllMapped 함수를 활용하여 함수는 매칭된 첫 번째 공백이 아닌 문자 뒤에 '\u200D(ZWJ)'를 추가하여 반환해준다.
(공백을 제외한 글자와 글자 사이에 결속을 표시해주는 작업)

 

 

+ 재사용성이 높다면 Extension에 정의하는 걸 추천한다.

String Extension