Flutter -TextSpan, TextPainter



위 사진 처럼 영상의 줄거리가 너무 길어서 잘리는 문제를 해결하는 방법을 알아보자

영상의 줄거리가 너무 길어 일부가 잘려 나오는 문제가 발생했다. 기본적으로 Text 위젯에서 maxLines와 overflow: TextOverflow.ellipsis 속성을 사용하면 최대 줄 수를 제한하고 초과하는 부분을 "..."으로 표시할 수 있다.

Text(
  "이 텍스트가 아주 길어요. 엄청 길어서 감당 못할거에요. 자신 있어요?",
  maxLines: 2, // 최대 2줄까지만 표시
  overflow: TextOverflow.ellipsis, // 넘치는 부분은 "..." 처리
  style: TextStyle(fontSize: 18),
)

그러나 위 방식만으로는 사용자가 전체 내용을 볼 수 없다는 단점이 있다. 따라서 다음과 같은 방식으로 해결할 수 있다.

해결 방법

1. maxLines를 3으로 설정하여 기본적으로 최대 3줄까지만 표시
2. 텍스트가 너무 길 경우 "더보기" 버튼을 표시
3. "더보기" 클릭 시 maxLines을 null로 변경하여 전체 텍스트 표시

여기서 중요한 점은 텍스트가 3줄을 초과하는지 여부를 판단해야 한다는 것이다. 이를 위해 TextPainter.didExceedMaxLines 속성을 활용하면 된다.

여기서 포인트는 텍스트 초과 여부를 알아야한다 어떻게 하면 체크를 할수있을까

텍스트 길이 초과 여부 체크 (TextPainter.didExceedMaxLines)을 활용해야 한다.

여부 체크 코드를 같이 보자

void _checkIfTextOverflows() {
    final textPainter = TextPainter(
      text: TextSpan(text: widget.text, style: TextStyle(fontSize: 16)),
      maxLines: 3,
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(maxWidth: 300); // 최대 너비 설정

    setState(() {
      _isOverflowing = textPainter.didExceedMaxLines; // 텍스트 초과 여부 체크
    });
  }

TextSpan과 TextPainter란?

TextSpan

TextSpan은 리치 텍스트(Rich Text) 를 표현하는 데 사용된다.

• 여러 개의 스타일이 혼합된 텍스트를 표시할 수 있다.
• children 속성을 사용해 여러 개의 TextSpan을 포함할 수 있다.
• 자체적으로 렌더링하지 않으며, 보통 Text.rich() 또는 TextPainter와 함께 사용된다.

TextPainter

TextPainter는 Flutter에서 캔버스(Canvas)에 텍스트를 그리는 역할을 한다.

• Text 위젯이 아니라 커스텀 드로잉(예: CustomPainter)을 통해 텍스트를 직접 렌더링할 때 사용된다.
• 텍스트 크기 계산에 유용하며, 줄바꿈을 고려한 크기 측정이 가능하다.
• 좌표 기반 드로잉이 가능하여 자유로운 UI 구성이 가능하다.

위 예시 코드에서 TextSpan을 사용한 굳이 이유는 TextPainter가 문자열(String)을 직접 받지 않고 TextSpan을 요구하기 때문이다!

TextPainter의 주요 속성

✅ 텍스트 크기 계산 → size, width, height
✅ 줄바꿈 여부 확인 → didExceedMaxLines
✅ 줄별 정보 가져오기 → computeLineMetrics()
✅ 클릭한 위치의 문자 찾기 → getPositionForOffset()
✅ 커서 위치 계산 → getOffsetForCaret()