[Flutter] Constraints 이해하기

CheolHyeon Park·2021년 3월 21일
0

flutter

목록 보기
2/5

이 글은 플러터의 공식 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
해당 페이지에 많은 예제가 있으니 참고하면 좋습니다.

profile
나무아래에 앉아, 코딩하는 개발자가 되고 싶은 박철현 블로그입니다.

0개의 댓글