[플러터 Flutter] 버그 잡기 : A renderFlex overflowed ...

플러터 ListView.builder로 리스트를 만드는 중에 이런 버그를 마주했다.

책에 나온 예제 코드이지만, 이 문제를 해결하는 방법은 나와있지 않았다.

 

아래와 같이 코드를 쳤을 때, 다음과 같은 화면과 애러 메시지가 출력된다.

데이터는 다른 곳에서 받아서 처리하는 것이기에, 여기서는 레이아웃에만 주목한다.

		ListView.builder(
                      itemBuilder: (context, index) {
                        return Card(
                          child: Container(
                            child: Row(
                              children: [
                                Image.network(
                                  data![index]['thumbnail'],
                                  height: 120,
                                  width: 120,
                                  fit: BoxFit.contain,
                                ),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(data![index]['title'].toString()),
                                    Text(data![index]['authors'].toString()),
                                    Text(data![index]['sale_price'].toString()),
                                    Text(data![index]['status'].toString()),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                      itemCount: data!.length,
                      controller: _scrollController,
                    )

버그가 생긴 코드

Do it! 플러터에 나오는 예제 코드

 

 

 

 

 

노란색과 검은색 빗금선이 있는 것은 화면 영역을 벗어났다는 것을 의미한다.

 

그리고 다음과 같은 에러 메시지가 계속 출력된다.

 

A renderFlex overflowed by 55 pixels on the right.

A renderFlex overflowed by 32 pixels on the right.

A renderFlex overflowed by 24 pixels on the right.

 

우리말로 번역하면,

렌더플렉스가 오른쪽으로 55픽셀 더 넘쳤다는 의미다.

 

 

 

 

 

 

 

 

 

그렇다면 어떻게 해결해야 할까?

 

크게 두 가지 처리를 해줘야 한다.

 

첫째는, 텍스트 처리

둘째는, 텍스트를 감싸고 있는 위젯을 처리

 

1. 텍스트 처리

위의 에러 메시지에서 등장한 단어에 답이 있다.

바로, overflow

 

overflow: TextOverflow.ellipsis 를 추가한 뒤 텍스트가 넘치는 상황이 발생하면,

ellipsis의 영단어 뜻 그대로 넘치는 부분은 생략 부호 '...'를 추가해 넘치는 부분을 처리해준다.

아래처럼 코드를 작성하면 된다.

Text(
  data![index]['title'].toString(),
  overflow: TextOverflow.ellipsis,
),

또한

TextOverflow.fade 는 서서히 사라지게 하는 방법으로 생략해주는 것,

TextOverflow.clip 깔끔하게 잘리는 방식으로 생략해주는 것도 있으니 한번 확인해보자.

 

 

2.  위젯을 처리 (Text를 감싸고 있는 위젯 - ex. Column, Row 등)

텍스트를 처리했으니 당연히 화면에 변경된 모습으로 보여야 한다.

그런데! 아무리 새로고침을 해도 도통 바뀌지 않는다. 

그럴 때는 당황하지 말고 텍스트를 감싸고 있는 위젯을 처리해줘야 한다.

 

어떻게? 바로 Expanded로 감싸줘야 한다.

 

Expanded 위젯은 Row와 Column 등을 자식(child)으로 사용할 수 있고, 화면의 남은 부분을 전부 채우는 방식으로 기능한다.

한마디로 '화면의 전부를 채운다'라고 기억하면 될 것이다.

 

Expanded 위젯으로 감싸주면 화면 전부를 채우게 되고,

텍스트가 넘치는 부분은 TextOverflow에 따라 처리가 될 것이다.

 

 

- 그렇게 아래 코드로 수정한 뒤 원하는 대로 작동했다.

한 줄 요약 : Text에는 TextOverflow를 넣어줬고, Column을 Expanded로 감싸줬다.

		ListView.builder(
                      itemBuilder: (context, index) {
                        return Card(
                          child: Container(
                            child: Row(
                              children: [
                                Image.network(
                                  data![index]['thumbnail'],
                                  height: 120,
                                  width: 120,
                                  fit: BoxFit.contain,
                                ),
                                Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      data![index]['title'].toString(),
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                    Text(data![index]['authors'].toString()),
                                    Text(data![index]['sale_price'].toString()),
                                    Text(data![index]['status'].toString()),
                                   ],
                                 ),
                               ],
                             ),
                           ),
                         ),
                       );
                     },
                      itemCount: data!.length,
                      controller: _scrollController,
                    )

 

이렇게 화면에 글자수가 넘어가는 것은 ... 로 처리되었다.