A RenderFlex overflowed by ~ pixels on the bottom.

A RenderFlex overflowed by ~ pixels on the bottom.

 

RenderFlex

RenderFlex는 하위 항목을 1차원 배열로 표시하는 것을 의미한다.

위의 에러는 아래쪽에 ~ pixels의 RenderFlex가 넘쳤다는 것을 얘기하는 것인데, 말그대로 ui가 차지할 공간이 부족하다는 것이다. 

 

해당 에러를 해결하기 위해서는 widget을 SingleChildScrollView로 감싸줘야한다.

 

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

 

에러아래 친절하게 나오는 가이드에서도 RenderFlex의 child가 사용가능한 공간을 벗어났기 때문에, 에러를 띄웠다고 설명한다. SingleChildScrollView를 사용하는 것도 Flex를 대신하기 위한 방법중 하나이기 때문이다.

 

SingleChildScrollView

하나의 위젯이 scroll되게 해주는 위젯이다. 

 

즉, ui가 있던 공간이 Scroll되게 해서 ui가 사용할 수 있는 공간을 넓혀주는 개념이라고 보면 될 것 같다.