Flutter Text widget overflow

김은상·2022년 8월 11일
0
post-thumbnail


Text위젯에 길이가 긴 경우 UI화면에 전부 표시를 하지 못하여 UI의 일부가 깨지는 것을 볼 수 있습니다.
Text위젯의 일부 속성을 정의하여 이를 방지 할 수 있습니다.

body: Column(
  children: [
    Container(
      width: 300,
      height: 50,
      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
      child: Text(
        "이 텍스트 위젯은 길이가 긴 문구를 포함하고 있습니다. 현재로써는 보이지 않을 정도 이지요!",
        style: TextStyle(fontSize: 22),
        textAlign: TextAlign.center,
      ),
    ),
    SizedBox(
      height: 10,
    ),
    Container(
      width: 300,
      height: 50,
      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
      child: Text(
        "이 텍스트 위젯은 길이가 긴 문구를 포함하고 있습니다. 현재로써는 보이지 않을 정도 이지요!",
        style: TextStyle(fontSize: 22),
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.center,
      ),
    ),
    Container(
      width: 300,
      height: 50,
      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
      child: Text(
        "이 텍스트 위젯은 길이가 긴 문구를 포함하고 있습니다. 현재로써는 보이지 않을 정도 이지요!",
        style: TextStyle(fontSize: 22),
        overflow: TextOverflow.clip,
        textAlign: TextAlign.center,
        maxLines: 1,
        softWrap: false,
      ),
    ),
    Container(
      width: 300,
      height: 50,
      padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
      child: Text(
        "이 텍스트 위젯은 길이가 긴 문구를 포함하고 있습니다. 현재로써는 보이지 않을 정도 이지요!",
        style: TextStyle(fontSize: 22),
        overflow: TextOverflow.fade,
        textAlign: TextAlign.center,
        maxLines: 1,
        softWrap: false,
      ),
    ),
  ],
),

위의 코드의 결과는 아래와 같이 나옵니다.

편의상 위에서부터 1,2,3,4번으로 칭하며 설명하겠습니다.
코드에서도 볼수 있듯 4개의 Text위젯은 동일한 String을 가지고 있다.

overflow 속성을 정의하지 않은 1번 위젯의 경우 일부의 내용이 아래에 있는 것을 짐작할 수 있다. 해당 내용들은 위젯의 높이에 따라 잘렸다.

2번 위젯의 경우 overFlow의 속성에 TextOverflow.ellipsis을 지정해 주었다. 그렇기에 Widget의 width 이상의 String 문자열들은 표시가 되지 않았다. 하지만 ...을 통해 String 문자열이 더 있다는것을 유저에게 짐작할 수 있다.

3,4번 위젯은 2번과 동일하게 String 문자열이 일부만 보이지만 ...표시는 없다.

3,4번 위젯의 차이점은 해당 Text 위젯의 끝을 어떻게 표현하냐이다. 3번의 경우 보여줄수 있는 문자열의 마지막 글자의 일부를 보여주며 String이 더 있다는 것을 User에게 암시할 수 있다.

4번의 경우 3번과 달리 마지막 글자에 fade효과를 넣었고 이 또한 String이 더 있다는 것을 User에게 암시한다.

profile
Flutter 시작

0개의 댓글