【Flutter】Text 긴 문자열에 대응

사건

문자가 길면 다음과 같이 오류가 발생합니다.

A RenderFlex overflowed by 1312 pixels on the right.

Swift 등이라면,
UILabel의 truncate 파라미터 등으로 조정합니다.

해결 방법

Text의 Overflow 매개 변수를 사용합니다.

수정 전

                              Text(categoryName,
                                style: TextStyle(
                                  fontFamily: 'SFProDisplay',
                                  color: Color(0xffffffff),
                                  fontSize: 30,
                                  fontWeight: FontWeight.w400,
                                  fontStyle: FontStyle.normal,
                                  letterSpacing: 0.0075,
                                ),
                                textAlign: TextAlign.right,
                              ),

수정 후

                              Text(categoryName,
                                style: TextStyle(
                                  fontFamily: 'SFProDisplay',
                                  color: Color(0xffffffff),
                                  fontSize: 30,
                                  fontWeight: FontWeight.w400,
                                  fontStyle: FontStyle.normal,
                                  letterSpacing: 0.0075,
                                ),
                                textAlign: TextAlign.right,
                                overflow: TextOverflow.ellipsis, //ここ！！
                              ),

TextOverflow.ellipsis

TextOverflow.clip

TextOverflow.fade

TextOverflow.visible

참고 기사

Flutter에서 텍스트 줄 바꿈