FlutterFlow에서 가장 중요한 레이아웃의 원칙에 대해 다루고 있습니다.
제약은 아래로, 크기는 위로라는 원칙이 있어요.
이를 암기하면 레이아웃을 마스터할 수 있습니다.
이 원칙은 '제약은 아래로'와 '크기는 위로'라는 두 부분으로 이루어져 있어요.
부모 위젯이 위치를 결정합니다.
제약은 높이와 너비의 최소 및 최대 값으로 전달되며, 부모에서 자식으로 내려갑니다.
이를 이용하여, 컨테이너의 자식에 적용되는 제약은 기본적으로 최소 너비 0부터 최대 너비 100, 최소 높이 0부터 최대 높이 100을 나타냅니다.
일반적으로 컬럼이나 로우 등을 사용하여 고정된 값으로 디자인하지 않고, 화면 크기에 대응합니다.
스크롤되는 레이아웃은 'unbounded' 상태를 가지며, 제약의 정확한 값이 아니라 어디에서부터 전달되었는지를 알 필요는 없습니다.
Flutter 레이아웃 디자인 원칙은?
Flutter에서 레이아웃 디자인을 할 때는 세 가지 원칙을 고려해야 해요.
첫 번째로, 제약 조건은 위에서 아래로 흐른다는 것이에요.
부모나 조부모 다양한 레벨에서 제약 조건이 내려오기 때문에 위젯 트리에서 명확한 경로를 찾아야 해요.
두 번째로, 크기는 아래에서 위로 전달된다는 것이죠.
부모 위젯이 자식 위젯에게 얼만큼의 공간을 할당할지 정한 후, 자식 위젯이 필요한 크기를 알리는 순서이에요.
세 번째로, 위치는 부모 위젯에서 결정된다는 것도 중요해요.
제약 조건과 크기가 정해지면, 부모 위젯이 자식 위젯을 올바른 위치에 배치할 수 있게 된답니다.
부모 컴포넌트가 자식 컴포넌트 위치를 설정하는 예시
컬럼이나 로우와 같은 부모 컴포넌트에 대한 예시를 통해, 부모 컴포넌트가 자식 컴포넌트의 위치를 설정할 수 있어요.
레이아웃을 디버그하는 방법을 확인하면, 특정 레이아웃이 작동하지 않거나 이상하게 보일 때, 이 레이아웃 원칙을 적용하여 문제를 해결할 수 있어요.
이상한 레이아웃 예시를 확인하면, 컬럼과 컨테이너를 갖고 있는데, 컨테이너의 가로 크기가 100픽셀로 설정되어 있는데도 전체 가로 영역을 차지하고 있으며, 세로 크기는 정상적이에요.
이번 예시에서는 row와 container 위젯을 사용하여 패딩과 정렬의 관계를 알아봤어요.
이 때, 컨테이너가 지정된 width보다 padding이 큰 경우, 실제로는 해당 컨테이너가 전체 영역을 차지하게 된답니다.
위의 경우, 컨테이너가 전체 width를 차지하는 모습을 row가 중앙에 오도록 설정했지만, 실제로는 좌측 정렬과 같아진다는 것을 알게 되었어요.
FlutterFlow의 세 번째 원칙은 부모가 위치를 설정한다에요.
부모 위젯인 '컬럼'이 위치를 지정하면 자식 위젯도 영향을 받아요.
그러나 때로는 부모와 자식의 요구 사이에서 모순이 발생할 수 있어요.
이때 두 가지 중 하나가 발생하는데, 오류 또는 덮어쓰기요.
우선순위가 있는데, 우선순위가 높은 것이 이기게 되죠.
이러한 모순을 해결하려면 '유연한'이나 '확장된' 위젯에 대해 알아보시면 됩니다요.
Widget 사이즈와 제약 조건에 따라 오버플로우 오류가 발생할 수 있어요요.
오버플로우 오류는 부모 위젯으로부터 전달받은 제약 조건을 따르지 못하면 발생하죠.
이를 해결하기 위해 제약 조건을 재정의하거나 크기를 조절해야 해요요.
레이아웃을 다루는 데에는 제약 조건이 하향식으로 전달되고, 사이즈는 상향식으로 전달되며, 부모 위젯이 위치를 설정해요요.