Flutter Widget: Expanded vs Flexible 비교 분석

Flutter에서 위젯을 동적으로 배치하는 것은 중요한 작업입니다. Expanded와 Flexible 위젯은 컨테이너 내에서 위젯 크기를 조절하는 데 사용되는 두 가지 주요 위젯입니다. 이 글에서는 두 위젯의 기능과 차이점을 심층적으로 분석하고 실제 코드 예시를 통해 이해를 돕겠습니다.

1. Expanded 위젯

Expanded 위젯은 컨테이너의 남은 공간을 가능한 한 채우도록 위젯을 확장합니다. 즉, 컨테이너 내 다른 위젯의 크기에 따라 확장되거나 축소될 수 있습니다.

주요 특징:

• 컨테이너의 남은 공간을 채우도록 위젯을 확장
• 다른 위젯과 함께 사용하여 컨테이너 내 공간을 효율적으로 활용
• flex 속성을 사용하여 상대적인 크기 설정 가능

Row(
  children: [
    Expanded(
      child: Text('This is a long text'),
    ),
    Expanded(
      child: Text('This is a short text'),
    ),
  ],
)

위 코드는 Row 위젯 내에서 두 개의 Expanded 위젯을 사용하여 텍스트 위젯을 컨테이너의 남은 공간을 채우도록 확장합니다.

2. Flexible 위젯

Flexible 위젯은 컨테이너 내에서 위젯 크기를 조절하는 데 더 많은 유연성을 제공합니다. 최소 크기와 최대 크기를 설정하여 위젯 크기 범위를 제한할 수 있습니다.

주요 특징:

• 컨테이너 내 위젯 크기를 조절하는 데 유연성 제공
• 최소 크기와 최대 크기 설정 가능
• fit 속성을 사용하여 위젯 크기 조절 방식 설정 가능

Row(
  children: [
    Flexible(
      child: Text('This is a long text'),
      flex: 2,
    ),
    Flexible(
      child: Text('This is a short text'),
      flex: 1,
    ),
  ],
)

위 코드는 Row 위젯 내에서 두 개의 Flexible 위젯을 사용하여 텍스트 위젯 크기를 조절합니다. flex 속성을 사용하여 왼쪽 텍스트 위젯의 크기가 오른쪽 텍스트 위젯의 크기보다 두 배 크도록 설정합니다.

3. Expanded vs Flexible 비교

기능	Expanded	Flexible
기본 동작	컨테이너 남은 공간 채우기	컨테이너 내 위젯 크기 조절
크기 설정	상대적 (flex 속성 사용 가능)	최소/최대 크기 설정 가능
유연성	낮음	높음
사용 사례	컨테이너 공간을 간단하게 채우기	컨테이너 내 위젯 크기를 정밀하게 조절

4. 결론:

Expanded와 Flexible 위젯은 각자의 장단점을 가지고 있습니다. 컨테이너 공간을 간단하게 채우고 싶다면 Expanded 위젯을 사용하고, 컨테이너 내 위젯 크기를 정밀하게 조절하고 싶다면 Flexible 위젯을 사용하는 것이 좋습니다.