인프런 커뮤니티 질문&답변

안녕하세요!

Expanded 위젯과 Flexible 위젯의 차이는 Expanded는 Flexible을 extend 하고 있고 fit: FlexFit.tight를 사용하고 있다는 점입니다. Flexible 위젯의 기본 fit 세팅은 FlexFit.loose 입니다.

결국 기본 세팅상 둘의 차이는 FlexFit.tight를 사용하냐 FlexFit.loose를 사용하냐의 차이를 두고 있습니다.

FlexFit.tight를 사용하게되면 부모의 크기만큼 (상위 위젯에서 차지 할 수 있는 크기만큼) 위젯이 늘어납니다. 이는 예제에서 보여드린 것 처럼 50x50의 박스를 만들었지만 결국 최대 크기를 차지하게 강제되는걸로 알 수 있습니다.

FlexFit.loose를 사용하게되면 최소한의 크기만 차지하게 됩니다. 그래서 50x50 박스의 크기만큼 Flex 위젯이 차지하게됩니다. 하지만 여기서 flex 크기를 조절했을때 Column이나 Row 안에서 사용되는 Expanded 위젯과 Flexible 위젯은 모두 비율을 존중해야합니다. 모두가 Expanded 1:1:1 비율로 flex 값이 적용 됐다면 굉장히 쉽습니다. 모두가 같은 공간을 나눠 갖으면 됩니다. 하지만 Flexible 1: Expanded 1: Expanded 1 이 적용이 된다면 Flex 룰에 의해서 모두 똑같은 공간을 나눠 갖기는 하지만 Flexible은 자식 위젯이 최소한의 공간만 차지하기때문에 50x50의 공간만 차지하게되고 나머지 두 Expanded 위젯은 Flexible 위젯이 얼마나 적은 공간을 실제 차지했는지와 무관하게 1:1:1 비율을 기준으로 위젯의 크기가 정해집니다. 그렇기때문에 Flexible 위젯의 flex 값을 올렸을때 버리는 공간이 계속 '많아져 보이는겁니다'. 거꾸로 얘기하면 Expanded 위젯들이 차지하는 공간이 '적어진다'로 볼 수 있습니다.

감사합니다!