Expanded 과 Flexible 의 차이

 

Expanded와 Flexible은 Flutter에서 반응형 레이아웃을 구성할 때 자주 사용되는 위젯들이다. 둘다 목적은 Row, Column, Flex 등의 위젯 안에서 남은 공간을 어떻게 차지할지를 정의하는 데 있다. 이때 둘이 비슷해서 가끔헷갈리곤하는데 이번 기회에 정리해보려 한다.

 

1. Expanded

• 기능: 남은 공간을 무조건 비율에 따라 강제로 차지한다.
• 특징: 자식 위젯의 크기 제한을 무시하고, 남은 공간을 비율대로 채운다.
• 언제 사용?
  • 고정된 비율로 화면을 나누고 싶을 때.
  • 남은 공간을 강제로 채워야 하는 경우.

 

2. Flexible

• 기능: 자식 위젯의 크기를 우선적으로 고려한 뒤, 남은 공간을 비율에 따라 차지한다.
• 특징: 자식 위젯이 필요로 하는 크기 제한만큼만 채운다.
• 언제 사용?
  • 자식 위젯의 크기가 고정되거나 제한되어 있을 때.
  • 유연하게 남은 공간을 나누고 싶을 때.

 

둘의 차이를 한줄요약하자면 Expanded는 네이밍그대로 "무조건 꽉 채워버린다" 이고 Flexible은 제약사항이 있으면 꽉 채우기보다 제약사항을 우선적으로 반영한다.

 

Expanded vs Flexible 선택 체크리스트

• 위젯의 크기가 고정적인가?
  • 네 → Expanded를 사용.
  • 아니요 → Flexible을 사용.
• 남은 공간을 모두 사용해야 하는가?
  • 네 → Expanded.
  • 아니요 → Flexible.
• 위젯 크기를 데이터 또는 콘텐츠에 맞게 조정해야 하는가?
  • 네 → Flexible.
• 고정된 비율 기반 레이아웃이 요구되는가?
  • 네 → Expanded.

 

활용 예시

채팅 메세지를 구현해보자! 먼저 채팅 메세지는 채팅 텍스트에 따라 위젯의 크기가 달라진다 -> Flexible 사용