[Flutter] Overflow된 Text에 ‘더보기’ 버튼 추가하기
종종 개발을 하다보면 Overflow된 긴 텍스트에 대해 ‘더보기’ 버튼을 추가 해야 하는 기능을 구현해야 될 때가 있다.
구현 목표
말로만 설명하면 무슨 의미인지 모를거 같아 실제 구현된 예시를 가져와봤다.
이번 시간에 아래와 같은 더보기 UI를 만드는 것을 목표로 한다.
구현 배경
생각보다 위와 같은 UI를 막상 만들려고 하면 까다롭다.
이는 Flutter 가 텍스트가 Overflow 됐을때 ‘…’ 으로 표시하는 TextOverflow.ellipsis 기능은 있지만 언제 Overflow 되는 이벤트를 알 수가 없어 동적으로 변하는 텍스트 길이는 더보기 버튼을 넣는 것이 힘들기 때문이다.
이를 해결 하기 위해 Stack overflow 에서 검색 해보았지만 방법들은 모두 TextPainter 를 이용해 텍스트 길이를 감지하는 것이었지만 가독성도 좋지 않을 뿐더러 한글의 경우 제대로 된 Overflow 감지가 되지 않았다.
이를 위해 직접 그냥 구현 하기로 했고 간단하게 TextOverflow.visible 과 TextOverflow.ellipsis를 토글하도록 했다.
더보기 텍스트 위젯 구현
사설이 좀 길어졌는데 본격적으로 구현 방법을 알아보도록 하자.
먼저 전체 코드를 살펴보면 아래와 같다.
이는 영상에서 보이는 코드로 간단하게 표현 가능하다.
어떤 코드 읽을때 필자의 경우 변수가 무엇인지 확인해 보는데 위의 코드에서 변수는 아래와 같다.
text: 텍스트 내용
maxText: 텍스트의 최대 길이
_isTextOverflow: 텍스트가 Overflow 됐는지의 유무
_isMore: 더보기 버튼을 클릭했는지의 유무이제 부분 부분 코드를 뜯어서 살펴 보도록 하자.
@override
void initState() {
super.initState();
_isTextOverflow = widget.text.length > widget.maxLength;
_isMore = !_isTextOverflow;
}초기화 시키는 부분으로 처음 위젯이 빌드 되기전에 들어온 텍스트가 Overflow 가 됐는지 안됐는지 확인하고 Overflow가 됐다면 _isTextOverflow를 true로 한다.
Oerflow가 됐다면 당연히 더보기 버튼이 표시되야 하므로 _isMore도 이에 따라 설정해준다.
Text(
widget.text,
maxLines: _isTextOverflow && !_isMore ? 10 : null,
overflow: _isTextOverflow && !_isMore
? TextOverflow.ellipsis
: TextOverflow.visible,
),
_isTextOverflow && !_isMore ? 버튼위젯 : 빈 위젯해당 부분은 핵심 되는 내용으로 가독성을 높이기 위해 좀 더 간략하게 표시 해봤다.
원리는 앞서 설명한 초기화 시키는 부분을 통해 Text가 Overflow 가 됐다면 ellipsis (…) 으로 표현 하는 것이고 되지 않았다면 전체 텍스트를 다 보여주는 형태이다.
maxLines 인자에서 볼 수 잇듯이 최대는 10줄 까지 보이게 했으며 필요에 따라 변경 하도록 한다.
여기에서 _isMore 변수가 들어간 이유는 더보기 버튼이 클릭되면 전체 텍스트가 전부 다 보이고 해당 버튼이 사라져야 하기 때문이다.
이상이 텍스트 위젯에 더보기 기능을 추가하는 방법이다.
정리하며
위의 코드는 막상 읽어 보면 간단하지만 필자의 경우 저렇게 아이디어가 나오는 과정이 쉽지는 않았다.
개발을 하다 보면 때론 간단한 문제를 복잡한 해결 방법으로 해결 할때가 있다. 어떤 문제에 대한 해결 방법을 모르거나 지나치게 복잡한 경우 본인이 앞서 말한 오류에 빠지지 않았는지 점검이 필요하다고 생각한다.
방법이 아니라 달성하려는 목적에 집중 하면 그 풀이 과정이 쉬워 진다.
이번 예에서도 필자는 처음 해당 기능을 구현 할때만 해도 Overflow 된 이벤트에 집중을 해 해당 방법을 통해 검색하니 생각보다 복잡할 뿐더러 코드의 가독성 또한 좋지 못했다.
하지만 달성하려는 목적이 더보기 기능이라는 것에 초점을 맞춰 개발을 진행 하다 보니 의외로 쉽게 풀렸다.
아직 많이 부족해 사실 나에게 당부하기 위해 해당 글을 정리하는 내용이기도 하다.
이 글이 같은 문제로 방황하는 누군가에게 도움이 되었으면 좋겠다 :)
