[TIL-017] Flutter 위젯 파헤치기 - Container

Flutter를 연습해 보니 Container위젯을 자주 사용하는 것 같다.

마치 HTML의 div태그와 비슷한 용도인 것 같다.

그래서 이번에는 자주 사용되는 만큼 중요한 Container위젯을 파헤쳐보자.

 

Container 위젯

이 위젯은 너비와 높이를 지정하고, 테두리, 그림자, 여백을 적용할 수 있는 박스이다.

너비와 높이는 부모 위젯이 있는지, 자식 위젯이 있는지에 따라 우선순위가 달라진다.

 

크기 결정 원리

부모, 자식 위젯이 없는 경우

부모, 자식 위젯이 없는 경우

• 부모, 자식 위젯이 없으면 Container위젯의 크기는 0

 

자식 위젯만 있는 경우

자식(Text) 위젯만 있는 경우

• 자식 위젯이 있으면 Container위젯의 크기는 자식의 크기를 가져온다.

 

부모 위젯만 있는 경우

부모(SizedBox) 위젯만 있는 경우

• 부모 위젯이 있으면 Container위젯의 크기는 부모의 크기를 가져온다.

 

부모,  자식 모두 있는 경우

본인 크기가 없는 경우

본인 크기가 없는 경우 부모의 크기를 가져온다

본인 크기가 있는 경우

본인의 크기가 있어도 부모의 크기를 가져온다

• Container위젯의 크기는 무조건 부모의 크기를 우선적으로 가져온다.

 

심화

Expanded가 부모 위젯일 경우

• 부모가 Expanded위젯이면 조금 생각해봐야 한다.
• 현재 상황은 Column의 자식으로 Expanded를 사용했다.
• Expanded는 메인 축 방향으로 꽉 채우고, 교차 축 방향은 크기가 0인 특징이 있다.
• 그래서 세로 방향으로 꽉 채우므로 Container에 크기가 지정되어 있어도, 자식이 있어도 높이는 부모의 크기를 가져오고 너비는 Container의 너비를 사용한다.
• 만약 너비가 없다면 자식인 Text위젯의 너비를 가져온다.

 

마무리(느낀 점)

Container위젯의 크기 결정 원리가 조금 이상한 것 같다.

부모 위젯의 크기를 가져오는 것은 마땅하나 부모 크기 내에서 본인의 크기를 지정할 수 있도록 해야 하는 것이 아닐까?

내가 생각한 것을 Flutter를 개발한 개발자가 모를 리가 없는데 어떤 이유 때문에 이렇게 만든 것일까?

 

이 부분의 궁금증을 해결해 줄 수 있는 분을 만나 뵙고 싶다.