Unbounded height에 대한 이해

 

`Unbounded height` 혹은 `hasSize` 관련 에러 메시지

Unbounded height과 관련한 오류를 flutter 초보로써 가장 많이 겪고 있다. 에러 메시지는 다음과 같다.

RenderBox was not laid out: RenderDecoratedBox#ed022 relayoutBoundary=up4
'package:flutter/src/rendering/box.dart': Failed assertion: line 1965 pos 12: 'hasSize'

 

 

`Unbounded height` 혹은 `hasSize` 관련 에러 특징

Unbounded height과 관련된 에러는 기본적으로 부모에게 높이의 제한이 없는데 자식이 부모의 높이에 맞게 늘어나려고 할 때 발생한다. 

 

 

`Unbounded height` 혹은 `hasSize` 관련 에러 예시

예를 들어 SingleChildScrollView > Column > Expanded와 같은 구조는 `hasSize`를 `assert`할 수 없다며 위와 같은 발생시킨다. SingleChildScrollView 하위의 Column은 높이에 제한이 없다. 그런데 그 자식인 Expanded는 부모의 높이에 맞게 늘어나려는 성질을 가진다. 따라서 높이를 결정할 수 없기 때문에 에러가 발생하는 것이다.

 

 

`Unbounded height` 혹은 `hasSize` 관련 에러 해결 방안

1. Expanded를 Flexible로 수정한다. Flexible은 Expanded와는 다르게 SingleChildScrollView 하위에서도 사용 가능하다.

2. 부모인 Column에 `mainAxisSize: MainAxisSize.min` 설정을 추가한다. 이렇게 하면 SinbleChildScrollView 하위에 있는Column이라고 하더라도 높이가 무한하지 않고, 자식의 크기에 맞춰 줄어든다.

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min, // 부모 Column이 자식 크기에 맞게 조정됨
    children: [
      Column(
        mainAxisSize: MainAxisSize.min, // 내부 Column도 크기를 제한
        children: [
          Flexible(
            child: Text("길어질 수도 있는 유동적인 텍스트"),
          ),
        ],
      ),
    ],
  ),
);

 

 

`Unbounded height` 혹은 `hasSize` 관련 에러 예시 2

SingleChildScrollView > Column > Column > Expanded인 경우에는 동일하게 수정하되, 가운데 있는 두 Column 모두에게 `mainAxisSize: MainAxisSize.min` 설정을 추가한다.