Flutter Constraints 정복

https://docs.flutter.dev/ui/layout/constraints

Understanding Constraints

Memorize the following rule:
Constraints go down. Sizes go up. Parent sets position.

• 위젯은 자신의 constraints를 parent로부터 얻는다. constraint는 4개의 double의 집합임. (min/max height/width)
• 위젯은 자신의 children을 검토함. 위젯은 자식 위젯에게 제약 조건이 무엇인지 알려주고 (자식마다 제약조건은 다를 수 있음.) 각 자식에게 원하는 크기를 묻는다.
• 그런 다음 위젯은 자식 위젯을 하나씩 배치함. 그리고 부모에게 자신의 크기를 알려줌 (원래 제약 조건 내에서)

5 pixels of padding이 있는 컬럼으로 구성된 위젯을 예로 들자면 아래와 같음.

Widget: “Hey parent, what are my constraints?”

Parent: “You must be from 0 to 300 pixels wide, and 0 to 85 tall.”

Widget: “Hmmm, since I want to have 5 pixels of padding, then my children can have at most 290 pixels of width and 75 pixels of height.”

Widget: “Hey first child, You must be from 0 to 290 pixels wide, and 0 to 75 tall.”

First child: “OK, then I wish to be 290 pixels wide, and 20 pixels tall.”

Widget: “Hmmm, since I want to put my second child below the first one, this leaves only 55 pixels of height for my second child.”

Widget: “Hey second child, You must be from 0 to 290 wide, and 0 to 55 tall.”

Second child: “OK, I wish to be 140 pixels wide, and 30 pixels tall.”

Widget: “Very well. My first child has position x: 5 and y: 5, and my second child has x: 80 and y: 25.”

Widget: “Hey parent, I’ve decided that my size is going to be 300 pixels wide, and 60 pixels tall.”

재미난 예시다

Limitations

If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored. Be specific when defining alignment.

children이 부모와 다른 크기를 원하는데, 부모의 정렬 정보가 충분하지 않은 경우에는 child의 사이즈가 무시될 수 있음!!
(Container의 child로 Container를 선언하고 parent는 500,500, child는 300,300을 명시하면 child의 300,300이 씹히고 500,500으로 꽉차게 되는데 이것과 같은 이유인 듯.)

Examples

Container(width: 100, height: 100, color: red)

RedContainer는 100,100의 크기를 갖고 싶어 하지만, 스크린과 같은 루트 레벨의 위젯(예를 들어, 앱의 바디가 되는 위젯)은 일반적으로 가능한 모든 공간을 차지하도록 제약조건을 받습니다. 즉, 이러한 위젯은 화면의 전체 크기로 설정됩니다.

만약 Container가 이러한 루트 레벨의 위젯 직접 아래에 위치한다면, 그 Container는 부모로부터 화면 전체를 채우도록 하는 제약조건을 받게 됩니다. 이 경우, Container에 width와 height를 명시적으로 설정했더라도, 이 설정은 부모로부터 받은 "화면을 채워라"는 제약조건과 충돌하게 됩니다.

Flutter에서는 부모로부터 받은 제약조건이 우선시되므로, Container는 부모의 제약조건을 충족시키기 위해 설정된 width와 height를 무시하고 화면 전체를 채우게 됩니다. 이는 Container가 최소한 부모로부터 받은 제약조건 내에서 자신의 크기를 최대한으로 확장하기 때문입니다.

따라서, Container가 100x100 크기가 아니라 화면을 채우게 되는 이유는 부모 위젯으로부터 받은 "화면 전체 크기로 확장하라"는 제약조건 때문.

---

// A
Center(
  child: Container(width: 100, height: 100, color: red),
)

// B
Align(
  alignment: Alignment.bottomRight,
  child: Container(width: 100, height: 100, color: red),
)

A와 B는 다르다. A에서 Center는 정확히 같은 크기로 강제 설정하므로 Center가 화면을 가득 채움. 센터는 컨테이너에 원하는 크기가 될 수 있지만, 화면보다는 크면 안된다고 알려줌. 상대적으로 컨테이너는 100x100이 됨.

---

Center(
  child: Container(color: red),
)

1. 먼저 Center를 fills the screen을 함.
2. Center는 Container에게 스크린보다 크지 않은 니가 원하는 사이즈만큼 가질 수 있다고 알려줌. Container는 사이즈가 명시되지 않았기 때문에 커질 수 있는 만큼 커져서 화면을 꽉 채운다.

그 외에도 공식 홈페이지에 들어가면 다양한 예시가 있음.
https://docs.flutter.dev/ui/layout/constraints
어쨌든 parent의 제약 조건을 받아 child가 size를 결정해 parent에게 알려준다.

Tight vs loose constraints

Flutter에서 위젯의 크기와 위치는 부모 위젯으로부터 받는 제약조건(constraints)에 의해 결정됩니다. 이 제약조건은 "긴밀한(tight)" 제약조건과 "느슨한(loose)" 제약조건의 두 가지 주요 유형으로 분류될 수 있습니다. 이러한 제약조건은 위젯이 어떤 크기로 렌더링될 수 있는지에 대한 부모의 요구사항을 나타냅니다.

긴밀한(Tight) 제약조건

긴밀한 제약조건은 위젯의 크기가 정확히 지정될 때 적용됩니다. 이 경우, 위젯은 부모로부터 특정 크기를 갖도록 지시받으며, 해당 크기로만 렌더링될 수 있습니다. 예를 들어, 부모 위젯이 자식 위젯에게 width: 100과 height: 100의 긴밀한 제약조건을 준다면, 자식 위젯은 정확히 100x100 픽셀의 크기로 렌더링됩니다.

느슨한(Loose) 제약조건

느슨한 제약조건은 위젯이 최소치와 최대치 사이의 어떤 크기로도 렌더링될 수 있음을 의미합니다. 즉, 위젯은 주어진 범위 내에서 필요한 만큼의 공간을 차지할 수 있습니다. 예를 들어, 부모 위젯이 최소 너비를 50, 최대 너비를 150으로 설정한 느슨한 제약조건을 자식에게 준다면, 자식 위젯은 이 범위 내의 어떤 너비로도 렌더링될 수 있습니다.

차이점

• 정의: 긴밀한 제약조건은 위젯의 크기가 정확하게 지정되는 경우에 적용되며, 느슨한 제약조건은 위젯이 특정 범위 내에서 크기를 조절할 수 있도록 할 때 적용됩니다.
• 유연성: 느슨한 제약조건은 위젯에 더 많은 유연성을 부여하여, 부모의 제약조건 내에서 자신의 크기를 조정할 수 있게 합니다. 반면, 긴밀한 제약조건은 위젯이 정확한 크기로만 렌더링되도록 제한합니다.
• 적용 예시: SizedBox 위젯은 자식에게 긴밀한 제약조건을 적용하여 정확한 크기를 갖도록 할 수 있습니다. Column이나 Row 같은 레이아웃 위젯은 자식에게 느슨한 제약조건을 적용하여 자식이 필요한 만큼의 공간을 차지하도록 할 수 있습니다.

Unbounded Constraints

like ScrollView, ListView

Flex

Flutter의 Flex 위젯은 Row와 Column의 기반 클래스입니다. 이들은 flex box 모델을 사용하여 자식 위젯들을 수평(Row) 또는 수직(Column)으로 배열합니다. Flex 위젯의 동작은 주 방향(primary direction)에서 받는 제약조건(constraints)이 제한적(bounded)인지 무제한(unbounded)인지에 따라 달라집니다. 이 구분은 위젯이 자식들을 어떻게 배치하고 크기를 조정할지 결정하는 데 중요합니다.

제한적(Bounded) 제약조건에서의 Flex Box

• 주 방향의 제한적 제약조건: Flex 위젯(Row 또는 Column)이 주 방향에서 제한적 제약조건을 받을 때, 이는 부모로부터 최대 크기가 정해져 있음을 의미합니다. 이 경우, Flex 위젯은 가능한 한 그 제약조건 내에서 최대 크기로 확장하려고 시도합니다.
• 동작: 자식 위젯들은 flex 속성을 통해 공간 분배를 조정할 수 있으며, Expanded와 Flexible 위젯을 사용하여 여유 공간을 어떻게 나눌지 결정할 수 있습니다. flex 속성이 더 큰 위젯은 더 많은 여유 공간을 차지하게 됩니다.

무제한(Unbounded) 제약조건에서의 Flex Box

• 주 방향의 무제한 제약조건: Flex 위젯이 주 방향에서 무제한 제약조건을 받는 경우, 이는 부모로부터 최대 크기가 정해져 있지 않음을 의미합니다. 이러한 상황은 주로 Flex 위젯이 스크롤 가능한 위젯 내부에 있거나 또 다른 Flex 위젯 내부에 있을 때 발생합니다.
• 동작: 이 경우, Flex 위젯은 자식들을 주 방향에 맞추어 배치하기 위해 필요한 만큼의 공간만 사용하려고 합니다. 자식 위젯들의 flex 값은 0으로 설정되어야 하며, Expanded 위젯을 사용할 수 없습니다. Expanded 위젯을 사용하려고 하면, 무제한 공간에서 얼마나 확장해야 하는지 결정할 수 없기 때문에 예외가 발생합니다.

교차 방향의 제약조건

• 교차 방향 제약조건: Flex 위젯의 교차 방향(예: Column의 너비 또는 Row의 높이)은 항상 제한적이어야 합니다. 이는 Flex 위젯이 자식들을 제대로 정렬하고 배치하기 위해서는 교차 방향의 크기가 명확해야 하기 때문입니다.
• 중요성: 교차 방향이 무제한인 경우, Flex 위젯은 자식들을 어떻게 정렬하거나 배치해야 할지 결정할 수 없게 되므로, 이는 레이아웃 문제를 발생시킬 수 있습니다.