[Flutter 트랙] 앱개발 종합반 2-10 - Expanded

이번 시간에는 Expanded 위젯을 살펴보겠습니다.

Expanded 위젯은 Row 또는 Column 내부에서 사용되며, **남은 공간을 자동으로 채우는 기능**을 합니다.

이 위젯을 활용하면, UI의 크기를 **동적으로 조정**하면서도 원하는 비율로 배분할 수 있습니다.

1. 기본적인 Expanded 사용

다음 예제는 **Row** 내부에서 Expanded 위젯을 사용하여 화면의 가로 공간을 자동으로 분배하는 방식입니다.

Row(
  children: [
    Expanded(
      child: Container(height: 50, color: Colors.red),
    ),
    Expanded(
      child: Container(height: 50, color: Colors.green),
    ),
    Expanded(
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)

➡️ **위 코드를 실행하면 세 개의 박스가 같은 크기로 가로 공간을 나눠 가지게 됩니다.**

2. Expanded의 Flex 속성

Flex 속성을 사용하면 각 위젯이 **얼마나 많은 공간을 차지할지 조정할 수 있습니다.**

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(height: 50, color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(height: 50, color: Colors.green),
    ),
    Expanded(
      flex: 3,
      child: Container(height: 50, color: Colors.blue),
    ),
  ],
)

➡️ **flex 값의 비율대로 공간이 분배됩니다.**

• 빨간색 박스: 전체의 1/6 차지
• 초록색 박스: 전체의 2/6 차지
• 파란색 박스: 전체의 3/6 차지

3. Column에서 Expanded 사용

Column 내부에서도 동일하게 사용 가능합니다.

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(width: 100, color: Colors.red),
    ),
    Expanded(
      flex: 3,
      child: Container(width: 100, color: Colors.green),
    ),
    Expanded(
      flex: 2,
      child: Container(width: 100, color: Colors.blue),
    ),
  ],
)

➡️ **위 코드를 실행하면 세 개의 박스가 세로 방향으로 배분됩니다.**

• 빨간색 박스: 1/6
• 초록색 박스: 3/6
• 파란색 박스: 2/6

4. Expanded를 사용할 때 주의할 점

• Expanded는 **Row 또는 Column 내부에서만 사용 가능**합니다.
• Expanded는 **남은 공간을 자동으로 차지**합니다. 특정 크기를 강제할 경우 에러가 발생할 수 있습니다.
• Expanded와 SizedBox를 조합하면 일부 영역만 고정하고 나머지를 자동으로 조정할 수도 있습니다.

Row(
  children: [
    SizedBox(
      width: 100,
      child: Container(color: Colors.black),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

➡️ **왼쪽 컨테이너는 100px 고정, 오른쪽 컨테이너는 나머지 공간을 차지합니다.**

5. 결론

• Expanded를 사용하면 **남은 공간을 자동으로 분배**할 수 있습니다.
• flex 속성을 활용하면 **비율을 조정하여 균형 잡힌 UI**를 만들 수 있습니다.
• Row와 Column에서 **유동적인 레이아웃을 만들 때 필수적인 위젯**입니다.

➡️ **다음 강의에서는 Flexible 위젯을 살펴보겠습니다.**