Box Constraints

https://flutter.dev/docs/development/ui/layout/box-constraints

Intro

flutter에서 위젯은 RenderBox에 의해 그려진다. RenderBox는 부모의 Constraints 내에서 자신의 크기를 조정한다. Constraints는 최대, 최소의 너비, 높이로, 크기는 특정 너비, 높이로 구성된다.

일반적으로 RenderBox는 Constraints를 처리하는 방식에 따라 세가지로 나눌 수 있다.

• 가능한 한 크게 그려지는 박스. Center, ListView 등에서 사용된다.
• 자식과 같은 크기로 그려지는 박스. Transform, Opacity 등에서 사용된다.
• 특정 크기로 그려지는 박스. Image, Text 등에서 사용된다.

예외1.
Container는 생성자의 인자에 따라 다르게 그려진다. 기본적으로 가능한 한 크게 그려지지만 너비나 높이가 주어진다면 그 값에 맞춰서 그려진다.

예외2.
Row, Column은 아래의 Flex 목차에서 설명한 것과 같이 주어진 Constraints를 기반으로 그려진다.

엄격한 Constraints
엄격한 constraints는 최대, 최소의 크기가 같은 것을 의미하며, 이러한 constraints를 가진 위젯의 자식 위젯은 부모와 동일한 크기를 가질 수 밖에 없다.(조절 불가능)

예시로 App 위젯은 RenderView 위젯의 자식 위젯인데 RenderView는 App 위젯에게 앱의 contents area(일반적으로 디바이스의 전체 화면)을 채우도록 강제한다

느슨한 Constraints
느슨한 constraints는 최대 크기를 지정하되 최소 크기를 지정하지 않는다.

예: Center

Unbounded Constraints

double.infinity는 최대 크기를 unbounded 하거나 infinite하게 만든다.

가능한 한 크게 그려지려는 박스에 unbounded constraints가 주어질 경우 제대로 작동하지 않고 디버그 모드에서 예외를 발생시킨다.

크기가 double.infinity인 위젯에 Center나 Listview를 넣게 되는 경우에 해당한다.

unbounded constraints를 가질 수 있는 일반적인 경우는 flex 박스(Row와 Column)와 scroll 영역(ListView, ScrollView 및 서브클래스)의 내부이다.

구체적으로 ListView는 대각 방향에 대해(vertical-scroll일 경우 horizontal, horizontal-scroll일 경우 vertical) 가능한 한 확장한다.

Flex

Flex 박스(Row와 Column)는 주어진 방향(Row는 가로, Column은 세로)에 대해 unbounded constraints와 bounded constraints에 기반해 다르게 작동한다.

bounded constraints에 대해서는 해당 방향으로 가능한 한 크게 그려진다.
unbounded constraints에 대해서는 자식 위젯들의 크기에 맞춰 그려진다. 이 때 자식 위젯들에 대해 flex를 0 이외의 값으로 설정할 수 없다. 이것은 flex 박스가 다른 flex 박스나 scrollable 내부에 있을 경우 Expanded를 사용할 수 없다는 것을 의미한다. 그렇게 할 경우 예외가 발생한다.

SingleChildScrollerView안에 Column을 넣고 이 Column을 Expanded로 감싸면 예외가 발생한다는 뜻

대각 방향에 대해(Column일 경우 width, Row일 경우 height) unbounded한 값을 사용하면 안된다. 이 경우, 내부의 자식 위제들을 의도대로 정렬할 수 없다.

crossAxisAlignment를 사용하자. stretch를 쓰면 된다.