플러터 Expanded Widget, Flexible Widget

Expanded Widget

주어진 공간을 자식에게 강제로 채우게 만들어요. 즉, 사용 가능한 모든 공간을 차지하도록 확장합니다.

 

`Flexible` 위젯의 `fit` 속성이 `FlexFit.tight`로 설정된 것과 동일한 역할을 합니다

 

여러 개의 Expanded 위젯이 있을 경우, flex 값을 기반으로 비율을 조정할 수 있어요.
flex 기본값은 1이며, 비율을 조절할 수 있습니다.

 

Row(
	children: [
		Expanded(
			child: Container(
				color: Colors.lightBlue,
				height: 50,
				width: 50,
			),
		),
		Container(
			color: Colors.pinkAccent,
			height: 50,
			width: 50,
		),
		Container(
			color: Colors.amber,
			height: 50,
			width: 50,
		),
		Container(
			color: Colors.green,
			height: 50,
			width: 50,
		),
	],
),

Flexible Widget

자식 위젯이 가용 공간을 차지하되, 필요할 경우 줄어들 수 있도록 허용합니다.

 

`fit` 속성을 이용하여 `FlexFit.tight` 또는 `FlexFit.loose`를 설정할 수 있습니다.

• FlexFit.tight → Expanded와 동일 (최대한 확장)
• FlexFit.loose → 가용 공간을 차지할 수 있지만, 반드시 확장되지 않음

Expanded와 달리, 남은 공간을 모두 차지하지 않을 수도 있음.
fit: FlexFit.loose 설정 시, 자식 위젯이 크기를 조정할 수 있도록 허용.
flex 속성으로 비율 조절 가능 (flex: 1 기본값).

 

Row(
	children: [
		Flexible(
			// fit: FlexFit.tight, 
         	 	// fit: FlexFit.loose, 
			child: Container(
				color: Colors.blueAccent,
				height: 50,
				width: 50,
			),
		),
		Container(
			color: Colors.pinkAccent,
			height: 50,
			width: 50,
		),
		Container(
			color: Colors.amber,
			height: 50,
			width: 50,
		),
		Container(
			color: Colors.green,
			height: 50,
			width: 50,
		),
	],
),

각 결과

 

 

Expanded vs Flexible

 

	Expanded	Flexible
부모 위젯	Row, Column, Flex	Row, Column, Flex
기본 fit 값	FlexFit.tight	FlexFit.loose
공간 차지 방식	가능한 최대 공간 차지	필요에 따라 공간 차지 가능
flex 적용	✅ 지원	✅ 지원

 

정리

• Expanded → 최대한의 공간을 차지 (남은 공간을 전부 사용)
• Flexible → 필요한 만큼만 공간 차지 (줄어들 수도 있음)
• Flexible(fit: FlexFit.tight) = Expanded와 동일
• flex 속성을 사용하면 여러 위젯의 크기 비율을 조정 가능

 

✅ 언제 사용할까?

 

남은 공간을 모두 차지해야 할 때	Expanded
남은 공간을 유연하게 조절하고 싶을 때	Flexible