플러터에서 Flexible 위젯 사용법 및 Expanded와의 차이점

 

Flexible 위젯은 플러터(Flutter)에서 Flex 계열 위젯(Row, Column, Flex) 내에서 자식 위젯의 크기를 조정할 때 유용하게 사용하는 도구입니다.

Flexible 위젯은 Expanded 위젯과 유사한 역할을 하지만, 크기 조정에 좀 더 세밀한 제어를 제공합니다.

이 포스트에서는 Flexible 위젯의 기본 개념과 사용법, 그리고 Flexible과 Expanded의 차이점에 대해 자세히 다루겠습니다.

 

1. Flexible 위젯의 기본 개념

Flexible 위젯은 자식 위젯이 부모 위젯 내에서 남는 공간을 차지하도록 도와줍니다.

Flex 계열 위젯(Row, Column, Flex) 내에서 자식 위젯의 크기를 조정할 때 사용됩니다.

Flexible은 Expanded와 유사하게 자식 위젯이 부모 위젯의 가용 공간을 차지하도록 하지만, 자식 위젯의 크기 조정 방식에 대해 더 세밀한 제어를 제공합니다.

기본 사용법

Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.red,
        child: Text('2/3 공간 차지'),
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.green,
        child: Text('1/3 공간 차지'),
      ),
    ),
  ],
)

위 예제에서는 Flex 위젯을 사용해 두 개의 Flexible 자식 위젯이 각각 2/3 및 1/3의 공간을 차지하도록 설정합니다.

Flexible은 flex 속성을 통해 자식 위젯들이 차지할 공간의 비율을 정의합니다.

2. Flexible의 주요 속성

2.1 flex

flex 속성은 자식 위젯이 부모 위젯 내에서 남는 공간을 나누는 비율을 설정합니다.

Expanded와 마찬가지로 flex 값을 설정하여 공간 배분 비율을 조정할 수 있습니다.

flex: 2, // 자식 위젯이 남는 공간의 두 배를 차지함

2.2 fit

fit 속성은 자식 위젯이 남는 공간을 어떻게 채울지를 정의합니다. 두 가지 옵션이 있습니다:

• FlexFit.tight: 자식 위젯이 가능한 모든 공간을 차지합니다. 이 옵션은 Expanded와 유사합니다.
• FlexFit.loose: 자식 위젯이 가능한 공간을 차지하지만, 필요한 만큼만 차지합니다. 자식 위젯이 최소한의 크기만 필요로 할 때 유용합니다.

fit: FlexFit.tight,  // 또는 FlexFit.loose

3. Flexible과 Expanded의 차이점

3.1 Flexible vs Expanded

• Flexible
  • 기능: 자식 위젯이 남는 공간을 차지하지만, 자식 위젯의 크기를 조정할 수 있는 fit 속성을 통해 세밀한 제어가 가능합니다.
  • 사용 예시: 자식 위젯이 공간을 최소한만 차지하거나, 여유 공간을 조절할 때 사용합니다.
• Expanded
  • 기능: 자식 위젯이 남는 모든 공간을 차지합니다. fit 속성이 항상 FlexFit.tight으로 고정되어 있습니다.
  • 사용 예시: 자식 위젯이 가능한 모든 공간을 차지하도록 할 때 사용합니다.

3.2 선택의 기준

• Flexible은 자식 위젯이 여유 공간을 유동적으로 조절할 수 있게 하며, 자식 위젯의 크기와 비율을 세밀하게 조정할 수 있습니다.
  따라서 자식 위젯이 남는 공간을 차지하되, 그 크기를 조정할 수 있는 경우에 적합합니다.
• Expanded는 자식 위젯이 남는 모든 공간을 차지해야 하는 경우에 사용됩니다.
  자식 위젯의 크기를 최대한 확장하고자 할 때 유용합니다.

4. Flexible의 활용 예시

4.1 Column과 Row에서의 활용

Column(
  children: <Widget>[
    Flexible(
      flex: 1,
      fit: FlexFit.tight,
      child: Container(
        color: Colors.red,
        child: Text('Flexible with tight fit'),
      ),
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.loose,
      child: Container(
        color: Colors.green,
        child: Text('Flexible with loose fit'),
      ),
    ),
  ],
)

이 예제에서는 Column 내에서 두 개의 Flexible 위젯이 각각 다른 비율과 크기로 남는 공간을 차지하도록 설정됩니다.

4.2 Row에서의 활용

Row(
  children: <Widget>[
    Flexible(
      flex: 3,
      child: Container(
        color: Colors.blue,
        child: Text('3/4 공간 차지'),
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.yellow,
        child: Text('1/4 공간 차지'),
      ),
    ),
  ],
)

이 예제에서는 Row에서 Flexible 위젯을 사용해 자식 위젯들이 주어진 공간을 비율에 따라 나누어 차지하도록 합니다.

5. 결론

Flexible 위젯은 플러터에서 Flex 계열 위젯 내에서 자식 위젯의 크기를 유연하게 조정할 때 매우 유용합니다.
Expanded와 비슷한 역할을 하지만, fit 속성을 통해 자식 위젯의 크기를 세밀하게 제어할 수 있어 더 다양한 레이아웃 요구에 대응할 수 있습니다.
각각의 사용 사례에 따라 Flexible과 Expanded를 적절히 활용하여 효과적인 레이아웃을 구성하세요.

 

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

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