플러터 Flex와 Expanded의 차이점 및 적절한 사용법

 

플러터(Flutter)에서 레이아웃을 구성할 때 Flex와 Expanded는 매우 중요한 위젯입니다.

이 두 위젯은 유사해 보이지만, 사용 방법과 역할에서 중요한 차이점이 있습니다.

이 포스트에서는 Flex와 Expanded의 차이점을 설명하고, 각각의 적절한 사용 방법에 대해 다룹니다.

1. Flex와 Expanded란?

• Flex: 자식 위젯들을 주어진 축(Axis)을 따라 배치하는 컨테이너 위젯입니다.
  Row와 Column 위젯의 기반이 되는 더 일반적인 형태로, 수평(Axis.horizontal) 또는 수직(Axis.vertical) 방향으로 레이아웃을 구성할 수 있습니다.
• Expanded: Flex 계열 위젯(Row, Column, Flex)의 자식으로 사용되며, 남는 공간을 적절히 채우는 역할을 합니다.
  다른 자식 위젯들과 함께 공간을 나누거나 모든 남은 공간을 차지할 수 있도록 합니다.

2. Flex의 사용 예시 및 특징

2.1 Flex의 기본 구조

Flex는 주어진 축을 따라 자식 위젯들을 배치합니다.

축은 direction 속성을 사용해 지정할 수 있으며, 수평으로 배치하려면 Axis.horizontal, 수직으로 배치하려면 Axis.vertical을 사용합니다.

Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 50,
      height: 50,
    ),
    Container(
      color: Colors.green,
      width: 50,
      height: 50,
    ),
    Container(
      color: Colors.blue,
      width: 50,
      height: 50,
    ),
  ],
)

2.2 Flex의 주요 속성

• direction: 자식 위젯들을 배치할 축을 지정합니다.
• mainAxisAlignment: 주 축(main axis)에서 자식 위젯들의 정렬 방식을 정의합니다.
• crossAxisAlignment: 교차 축(cross axis)에서 자식 위젯들의 정렬 방식을 정의합니다.
• mainAxisSize: 주 축의 크기를 자식 위젯들의 크기에 맞출지, 부모 위젯의 크기를 최대한 사용할지 결정합니다.

3. Expanded의 사용 예시 및 특징

3.1 Expanded의 기본 구조

 

Expanded는 Flex 위젯의 자식으로 사용되며, 부모 위젯의 남은 공간을 차지하려고 합니다.
Flex 속성을 통해 여러 Expanded 위젯들 간에 남은 공간을 어떻게 나눌지 지정할 수 있습니다.

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        child: Text('첫 번째 위젯'),
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.green,
        child: Text('두 번째 위젯 (두 배의 공간 차지)'),
      ),
    ),
    Container(
      color: Colors.blue,
      width: 50,
      child: Text('고정된 크기의 위젯'),
    ),
  ],
)

3.2 Expanded의 주요 속성

• flex: 남은 공간을 자식 위젯들 간에 나누는 비율을 설정합니다. 기본값은 1입니다.

4. Flex와 Expanded의 차이점

• 역할
  • Flex는 레이아웃을 정의하는 컨테이너 역할을 하며, 자식 위젯들을 주어진 축을 따라 배치합니다.
  • Expanded는 Flex의 자식으로, Flex가 할당한 공간을 나누거나 남은 공간을 채우는 역할을 합니다.
• 위치
  • Flex는 최상위 레이아웃 위젯으로 사용되며, Row와 Column의 부모 위젯 역할을 합니다.
  • Expanded는 Flex 계열 위젯의 자식으로만 사용할 수 있습니다.

5. 적절한 사용 방법

5.1 언제 Flex를 사용해야 할까?

• 특정 축을 따라 자식 위젯들을 배치할 필요가 있을 때.
• 레이아웃의 주 축과 교차 축에 대한 정렬을 정밀하게 제어해야 할 때.
• Row나 Column을 사용하지 않고도 유사한 기능을 구현하고 싶을 때.

5.2 언제 Expanded를 사용해야 할까?

• Row, Column, 또는 Flex에서 자식 위젯이 남은 모든 공간을 차지하도록 하고 싶을 때.
• 여러 자식 위젯이 부모 위젯의 가용 공간을 균등하게 나누도록 하고 싶을 때.
• 자식 위젯이 고정된 크기가 아닌 부모 위젯의 크기에 맞춰 확장되도록 하고 싶을 때.

6. 결론

Flex와 Expanded는 플러터에서 유연한 레이아웃을 구성하는 데 필수적인 위젯입니다.

Flex는 자식 위젯들을 특정 축을 따라 배치하는 컨테이너 역할을 하며, Expanded는 이러한 레이아웃에서 자식 위젯들이 남은 공간을 차지할 수 있도록 돕는 도구입니다.

각각의 위젯을 적절히 사용하면 다양한 화면 크기와 구성에서 일관된 사용자 경험을 제공할 수 있습니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱