우리는 플러터로 앱을 개발할 때, 디바이스 별 대응 가능한 Responsible UI를 만들고자 Flexible 또는 Expanded를 사용합니다. Flexible 또는 Expanded는 Row 및 Column 같은 Flex 위젯의 자식 위젯으로 사용되며, flex라는 속성을 사용하여 위젯이 화면에서 차지하는 비율을 지정할 수 있습니다.
Flex widget
Flex 위젯은 정해진 축(main axis)을 기준으로 여러개의 자식 위젯들을 1차원의 배열로 나열하는 데 사용되는 위젯입니다. Column과 Row는 Flex를 상속하고 있으며, Column은 자식 위젯들을 수직으로, Row는 자식 위젯들을 수평으로 나열합니다.
Flex 위젯은 레이아웃을 정렬하거나 자식 위젯들이 차지하는 공간을 나누는 데 적합합니다. 위에서 언급했듯 Expanded 또는 Flexible을 사용해서 가능한 공간만큼 확장시킬 수도 있고, flex를 활용하여 각 위젯이 정해진 공간 내에서 차지하는 비율을 지정할 수 있습니다.
* [Row], for a version of this widget that is always horizontal.
* [Column], for a version of this widget that is always vertical.Flexible
Flexible 위젯의 경우 자식 위젯을 렌더링 영역의 최대 사이즈까지 확장시킵니다. 다만 자식 위젯의 크기가 부모 위젯의 크기보다 작을 경우, 아무런 변화를 주지 않습니다.
Column의 경우 디폴트로 설정된 mainAxisSize의 값이 max이지만, 고정된 크기를 가진 각 자식 위젯들을 Flexible로 감쌌을 경우 자식 위젯의 크기만큼만 확장됩니다.
Flexible 위젯에는 fit이라는 속성이 존재합니다. 만약 이 속성을 tight로 지정한다면 Expanded와 같은 효과를 줄 수 있습니다(기본값은 loose 입니다).
Expanded
자식 위젯을 렌더링 영역의 최대 사이즈까지 확장시킨다는 개념은 Flexible과 동일하나, Expanded의 경우 자식 위젯의 크기가 부모 위젯의 크기보다 작아도 가능한 최대 사이즈로 확장시킵니다.
자식 위젯들 간 화면에 표시되는 비율을 정하기 위해 아래와 같이 flex 속성을 활용할 수 있습니다.
References
Flutter Dev - Flex class
프론티어쿼리 - [Flutter]플러터 Flexible과 Expanded 차이점
WikiDocs - 02. Expanded, Flexible
