[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를 개발한 개발자가 모를 리가 없는데 어떤 이유 때문에 이렇게 만든 것일까?

 

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