앱에 필수 요소인 Text

사용자에게서 해당 Text 값을 받을땐

글자 수를 제한둬야한다는 주의사항이 있다.

 

예를들어 화면에 나타낼 수 있는 글자 수 는 10자라고 하자

그런데 사용자가 15자를 저장했다.

화면에는 당연히 overflow가 나타낼것이다.

Text가 더 노출되도록 영역을 키운다던지 Text 크기를 줄이거나 할것이지만

기기의 케이스가 너무 많아 표준화하기 어렵다.

 

화면에 나타낼 수 있는 글자 수는 기종마다 다를것이다.

화면이 큰 기종은 작은 화면의 기종보다 상대적으로 나타나는 글자 수가 많을 것이다.

 

따라서 제일 효과적인 방법은

영역을 제한두고 overflow가 나오면

다양한 효과로 방지하는것이다.

 

사용법은 간단하다.

Text(
'안녕하세요',
overflow:
    TextOverflow
        .ellipsis,
),

아래 overflow 붙혀주는것이다.

하지만 이렇게만 설정해도 오류가 뜰것이다.

왜냐하면...

overflow의 기준(영역)을 지정해주지 않았기 때문이다.

영역은 다양한 방법으로 지정 가능하나 나는 Expanded 위젯을 이용했다.

 

TextOverflow의 속성은

이렇게 있는데 직접 다 해보는게 좋을거같다.

 

 

 

 

 

추가로 글자 줄 갯수도 지정 가능하다.

Text(
'안녕하세요',
overflow:
    TextOverflow
        .ellipsis,
 maxLines: 1,       
),

바로 maxLines로 지정해줄 수 있다.

+ Recent posts