[Flutter] Expanded 위젯으로 Overflowed By xx pixels 해결하기

 

안녕하세요, 오예남 입니다.

오늘은 저번시간에 만들었던 ListView를 만들면서 발생한 Overflowed 현상을 해결하는 방법을 공유드리려고 합니다.

 

Flutter에서 자주 발생하는 문제인데, 보통 Row/Column 위젯을 사용할때 고정되지않은 크기의 자식위젯을 사용하면 스마트폰의 범위를 벗어나면서 에러가 발생합니다.

아래 사진처럼 UI상에서 오버플로가 발생했다는 노란색,검은색 줄무늬의 에러 표시를 볼 수 있습니다.

 

 

위 현상은 Flexible 이나 Expanded 위젯을 사용하면 쉽게 해결할 수 있습니다.

저는 아래와같이 Expanded 위젯으로 Column 위젯을 wraping하여 해결하였습니다.

 

ListView.builder(
    itemBuilder: (context, index) {
      return Card(
        child: Padding(
          padding: EdgeInsets.only(left: 10, right: 10),
          child: Container(
            child: Row(
              children: [
                Image.network(
                  data![index]['thumbnail'],
                  height: 100,
                  width: 100,
                  fit: BoxFit.contain,
                ),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                  Text(
                    "${data![index]['title'].toString()}",
                    overflow: TextOverflow.ellipsis,
                  ),
                  Text(
                      "게시자 : ${data![index]['author'].toString()}"),
                  Text(
                      "등록일 : ${data![index]['datetime'].toString()}"),
                  Text(
                      "재생시간 : ${data![index]['play_time'].toString()}"),
                ])),
              ],
            ),
          ),
        ),
      );
    },
    itemCount: data!.length,
  ))),

 

 

Expanded 위젯은 고정된 크기의 위젯들을 먼저 배치하고 남은 자리를 사용하는 위젯이라고 생각하시면 편해요.

flex 기능을 사용하면 Expanded 위젯끼리 비율도 지정해줄 수 있습니다.

Expanded만 사용하면 범위를 넘어서는 Text가 두줄로 표시되는데, 한줄로 표시하기위해 overflow 기능도 추가로 사용하였습니다.

 

Expanded 위젯에 대한 공식문서도 첨부해드릴테니 참고 해주세요!

 

https://api.flutter.dev/flutter/widgets/Expanded-class.html

Expanded class - widgets library - Dart API