이 글은 플러터의 공식 docs를 참고하여 작성하였습니다. https://flutter.dev/docs/development/ui/layout/constraints
공부할 때 자주 겪는 문제
어떤 위젯은 width: 100
의 값이 적용되지 않는 모습을 볼 수 있습니다. 이 문제의 일반적인 답변은 Center
위젯을 이용하라는 것입니다.
하지만 위와 같은 방식은 모든 것을 해결할 수 없습니다. 플러터는 일반적인 HTML의 레이아웃과 다릅니다.
플러터의 레이아웃은 아래와 같은 규칙을 따릅니다.
Contraints go down. Sizes go up. Parent sets Position
위의 규칙을 이해하지 않는다면 플러터의 레이아웃을 이해할 수 없습니다.
Constraints rule
- 어떤 위젯은 부모로부터 자신의 constraints을 받습니다. 그 constraints는 4가지 double값으로 구성 됩니다. → width의 최소값/최대값, height의 최소값/최대값
- 위젯은 자신의 자식 리스트를 살펴봅니다. 그리고 각 자식들에게 해당 자식에게 그들의 constraints을 알려주고 각 자식들에게 원하는 size를 물어봅니다. (각 자식들의 constraints는 다를 수 있습니다.)
- 그리고 위젯은 각 자식들을 배치합니다.
- 마지막으로 위젯은 부모에게 자신의 constraints와 함께 size를 알려줍니다.
예를 들면
- 부모로부터 constraints를 받습니다. 최소너비 0 최대너비 400, 최소높이 30 최대높이 200
- 그리고 자신의 padding과 같은 속성을 계산한 후, 자식들에게 constraints를 줍니다.
- 우선 첫번째 자식은 너비 200에 높이 100를 알려줬습니다.
- 두번째 자식은 첫번째 자식 아래에 두길 원하니 남는 높이를 계산하여 constraints를 알려줍니다.
- 두번째 자식은 너비 100 높이 100을 알려줬습니다.
- 그리고 첫번째 자식의 위치
x: 100
y: 0
와 두번째 자식의 위치 x: 125
y: 100
를 잡고, 부모에게 총 필요한 너비와 높이값을 알려줍니다.
제약
위의 상황을 미루어 아래와 같은 제약 사항들이 있습니다.
- 위젯은 자신의 size를 오직 부모로부터 받은 contstraints에 의해서만 결정할 수 있습니다. 이것은 위젯 스스로 어떠한 사이즈도 결정할 수 없다는 뜻입니다.
- 위젯의 위치를 결정하는 건 부모이기 때문에 위젯은 자신의 위치를 결정하지 못합니다.
- 부모의 크기와 위치도 역시 자신의 부모에 의존하기 때문에 전체 위젯 트리를 고려하지 않고 위젯의 크기와 위치를 정확하게 정의하는 것은 불가능합니다.
- 부모가 충분한 정보를 제공 받지 않은 상태에서 자식의 사이즈를 다르게 하는것은 무시됩니다. 그러므로 구체적으로 정렬을 정의하는 것이 중요합니다.
https://flutter.dev/docs/development/ui/layout/constraints
해당 페이지에 많은 예제가 있으니 참고하면 좋습니다.