위젯이 어떻게 크기와 위치를 정할까요? (Flutter Constraint)
- 플러터 위젯은 '컨스트레인트'라는 규칙을 통해 화면 내에서 자신의 크기와 위치를 결정합니다. 📏
- 컨스트레인트는 부모에서 자식으로 하향식(Top-Down)으로 전달되고, 자식은 크기를 결정하여 부모에게 상향식(Bottom-Up)으로 보고합니다. ⬇️⬆️
- '타이트 컨스트레인트'는 부모가 자식에게 특정 크기를 정확히 지시하는 제약 조건입니다. 🎯
- '루즈 컨스트레인트'는 부모가 자식에게 크기 범위를 지정하여, 자식이 그 범위 내에서 자유롭게 크기를 결정하게 합니다. ↔️
- '언바운디드 컨스트레인트'는 특정 축에 대해 크기 제한이 없어 자식이 원하는 만큼의 크기를 가질 수 있게 합니다. ♾️
Column과 같은 다중 자식 위젯은 부모로부터 받은 제약 조건과 mainAxisSize에 따라 메인 축 크기를 결정하고, 교차 축 크기는 자식들의 크기를 조합합니다. 🏗️
Column은 자식들에게 메인 축에 대해 언바운디드 컨스트레인트를 전달하여, 자식들이 필요한 만큼의 세로 크기를 자유롭게 가져가도록 합니다. 🤸
- 자식 위젯들은 부모로부터 받은 컨스트레인트 내에서 자신의 콘텐츠에 필요한 크기를 계산하여 부모에게 보고합니다. 💬
Column은 자식들 중 가장 큰 가로 크기를 자신의 가로 크기로 채택하고, 세로 크기는 부모가 제시한 최대값을 유지합니다. 📊
Center 위젯은 자식의 크기를 받은 후, 자신의 크기 내에서 자식을 중앙에 배치하기 위해 패딩을 계산하여 최종 화면을 구성합니다. 🖼️