【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에서 텍스트 줄 바꿈
  • 좋은 웹페이지 즐겨찾기