Text overflow 확인 방법

TextPainter class - painting library - Dart API

프로젝트 개발중 해당 과 같이 더 보기 버튼이 있는것을 발견했다.

그런데 생각을 해보니 overflow가 아니라면 더 보기 버튼이 있어야 할 이유가 없었다.

overflow인지 아닌지를 파악할려고 젤처음에는 단순하게 length 를 사용해서 해보았으나 각 text마다 글자의 크기도 달라 굉장히 비효율적이였다.

그래서 여러 방법을 찾아보다 TextPainter를 발견했다.

예시코드

bool isMaxLineCheck() {
    var checkTextMaxLine = TextPainter(
      maxLines: 1,
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
      text: TextSpan(
        text: text,
      ),
    )..layout(minWidth: 0, maxWidth: 0);

    return checkTextMaxLine.didExceedMaxLines;
  }

layout에서 Width를 설정하고 해당 크기에서 overflow가 있을경우 true 없을경우 false 을 출력한다.

해당 방법을 몰랐다면 유용하게 사용할수 있을거 같다!