[Flutter] UI(2) - 'Horizontal viewport was given unbounded height' 에러 해결

 

 

 

Horizontal viewport was given unbounded height 에러 원인

 

Horizontal viewport was given unbounded height 에러는 보통 Scrollable 위젯을 column 혹은 다른 Scrollable 위젯 하위에 다시 사용할 때 발생한다. 발생 원인은 문자 그대로 위젯의 height에 대한 제약조건(constraint)이 걸려 있지 않아 위젯의 높이 영역이 어디까지인지 모호한 경우 발생하게 된다.

 

예를 들어 아래 이미지의 빨간 박스에 Listview가 들어가야된다고 가정하자. 빨간 박스의 윗부분들은 Column의 자식요소들로 이루어져 있을 것이고, 빨간박스 또한 Column의 자식요소 일 것이다.

 

 

코드를 간략하게 요약하면 

Column(
  children: <Widget>[
     SomeOtherWidgets(),
     
     // 제약 조건이 없는 ListView
     ListView.builder(),
    
  ]
)

 

이런 형태가 될 것이다. 하지만 ListView.builder가 가질 높이를 알 수 없기에 위 코드를 실행하면 Horizontal viewport was given unbounded height 에러를 뱉어 내게 된다. 이를 해결하기 위해서는 높이를 설정해주는 것만으로 간단하게 해결이 된다.

 

1. SizedBox(Container) 사용

Column(
  children: <Widget>[
     SomeOtherWidgets(),
     
     // 제약 조건이 없는 ListView에 SizedBox로 높이 지정
     SizedBox(
       height: 300,
       child: ListView.builder(),
     )
    
  ]
)

 

SizedBox혹은 Container를 사용해서 높이에 대한 제약 조건을 설정해주는 방법이다. SizedBox로 Wrapping을하면서 ListView는 지정된 높이를 가지게 되어 에러를 해결할 수 있다.

 

 

2. Expanded 사용

Column(
  children: <Widget>[
     SomeOtherWidgets(),
     
     // 제약 조건이 없는 ListView를 Expanded로 Wrapping
     Expanded(
       child: ListView.builder(),
     )
     
    
  ]
)

 

이 방법을 사용하면 Expanded로 인해 나머지 남은 높이를 모두 ListView가 사용하겠다고 선언하게 되는 것이다. 때문에 '남은 높이를 모두 사용하겠다'라는 제약조건이 생기므로 에러 해결이 가능하다.