Flutter for SwiftUI Devs - Layout process

 SwiftUI Layout Process 

1. SwiftUI는 하위 View의 크기에 따라 상위 View의 크기가 정해진다.
2. 모든 하위 View는
   
   • 각각의 하위 View에게 크기를 제안하고,
   • 하위 View에게 원하는 크기를 묻는다.
3. Each parent view renders its child view at the returned size.

 

 Flutter Layout Process 

1. Flutter는 상위 widget의 제약이 하위 widget으로 전달된다.
   제약 조건은 높이와 너비의 최솟값, 최댓값이 포함된다.
2. 하위 widget은 자신의 크기를 정할 때, 자신의 하위 widget과 아래 process를 모두 반복한다.
   
   • 하위 widget에게 그 제약조건을 알린다.
   • 하위 widget에게 어떤 크기를 원하는지 묻는다.
3. 상위 widget은 하위 widget을 layout한다.
   • 요청된 크기가 조건과 맞으면, 상위 widget은 해당 크기를 사용한다.
   • 맞지 않으면, 상위 widget은 높이와 너비를 제약 조건에 맞게 제한한다.

 

 Constraints 

Flutter는 상위 요소가 하위 요소가 원하는 크기를

override 할 수 있다는 점에서 SwiftUI와 다르다.

Widget은 원하는 모든 크기로 정할 수 없고,

상위 widget이 정해줄 때까지 위치를 알거나 정할 수 없다.

 

하위 widget에게 특정 크기를 강제하고 싶으면,

상위 widget은 제약조건을 tight 하게 설정해야 한다.

최소 크기를 최대 크기와 동일하게 설정하여 값을 정하면 된다.

 

SwiftUI에서는 view의 content에 따라

이용가능한 공간을 늘리거나 크기를 제한할 수 있다.

Flutter의 widget도 비슷하게 동작한다.

 

하지만, Flutter에서 상위 widget은 제한 없는 조건을 설정할 수 있는데,

무제한으로 조건을 설정하면, 자신이 가질 수 있는 최대 크기로 설정된다.

UnboundedBox(
  child: Container(
      width: double.infinity, height: double.infinity, color: red),
)

위와 같이 infinity로 두면, 자신이 가질 수 있는 최댓값으로 설정되지만,

UnconstrainedBox(
  child: Container(color: red, width: 4000, height: 50),
)

자신이 가질 수 있는 크기보다 큰 값으로 제약 조건이 설정되면,

Flutter는 overflow warning을 return 한다.

관련된 내용은 아래 링크를 참고하면 좋을 것 같다.

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

 

 

---

 

Flutter for SwiftUI Developers