플러터에서 Flex 위젯 사용 방법 및 주요 옵션

 

Flex 위젯은 플러터에서 레이아웃을 구성할 때 사용되는 위젯으로, 주로 Row와 Column의 기초가 되는 위젯입니다.

Flex는 축(Axis)을 기준으로 자식 위젯들을 배치하며, 자식 위젯들이 남는 공간을 어떻게 채울지 정의하는 다양한 속성을 제공합니다.

이 포스트에서는 Flex 위젯의 사용 방법과 주요 옵션들에 대해 설명합니다.

1. Flex 위젯의 기본 개념

 

Flex 위젯은 주어진 축을 따라 자식 위젯들을 정렬하는 컨테이너입니다.

Row와 Column은 각각 수평과 수직 축에 고정된 Flex 위젯으로, Flex는 축을 직접 지정할 수 있는 보다 일반적인 형태입니다.

기본 사용법

Flex 위젯의 기본 사용법은 다음과 같습니다.

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,
    ),
  ],
)

위 예제에서는 Axis.horizontal 방향으로 세 개의 컨테이너를 배치합니다. 이는 Row와 같은 수평 레이아웃을 구성합니다.

2. 주요 속성

2.1 direction

direction 속성은 자식 위젯들이 배치될 축을 지정합니다. 수평 방향은 Axis.horizontal, 수직 방향은 Axis.vertical을 사용합니다.

direction: Axis.horizontal,  // 또는 Axis.vertical

2.2 mainAxisAlignment

주 축(main axis) 방향에서 자식 위젯들의 정렬 방식을 정의합니다. 주로 공간을 어떻게 나눌지 결정합니다.

• MainAxisAlignment.start: 시작 위치에 정렬
• MainAxisAlignment.end: 끝 위치에 정렬
• MainAxisAlignment.center: 중앙에 정렬
• MainAxisAlignment.spaceBetween: 위젯들 사이에 동일한 간격을 둠
• MainAxisAlignment.spaceAround: 위젯들 사이와 끝에 균등한 간격을 둠
• MainAxisAlignment.spaceEvenly: 모든 공간을 균등하게 나눔

mainAxisAlignment: MainAxisAlignment.center,

2.3 crossAxisAlignment

교차 축(cross axis) 방향에서 자식 위젯들의 정렬 방식을 정의합니다.

• CrossAxisAlignment.start: 시작 위치에 정렬
• CrossAxisAlignment.end: 끝 위치에 정렬
• CrossAxisAlignment.center: 중앙에 정렬
• CrossAxisAlignment.stretch: 부모의 크기에 맞게 확장
• CrossAxisAlignment.baseline: 텍스트 기준선에 맞추어 정렬 (텍스트 위젯만 해당)

crossAxisAlignment: CrossAxisAlignment.start,

2.4 mainAxisSize

주 축(main axis)의 크기를 자식 위젯들의 크기에 맞출지 여부를 결정합니다.

• MainAxisSize.max: 부모 위젯의 최대 크기를 사용
• MainAxisSize.min: 자식 위젯들의 최소 크기를 사용

mainAxisSize: MainAxisSize.max,

2.5 verticalDirection

수직 축의 위젯 배치 방향을 지정합니다. 기본값은 VerticalDirection.down으로 위에서 아래로 배치합니다.

VerticalDirection.up을 사용하면 아래에서 위로 배치됩니다.

verticalDirection: VerticalDirection.down,  // 또는 VerticalDirection.up

3. Flex 위젯 사용 예시

3.1 수평 레이아웃

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

이 예제는 세 개의 컨테이너를 수평으로 균등하게 배치합니다.

3.2 수직 레이아웃

Flex(
  direction: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    Container(
      height: 100,
      color: Colors.red,
      child: Text('첫 번째 위젯'),
    ),
    Container(
      height: 100,
      color: Colors.green,
      child: Text('두 번째 위젯'),
    ),
    Container(
      height: 100,
      color: Colors.blue,
      child: Text('세 번째 위젯'),
    ),
  ],
)

이 예제에서는 세 개의 컨테이너를 수직으로 배치하고, CrossAxisAlignment.stretch를 사용하여 컨테이너가 가로로 부모의 전체 크기를 차지하도록 합니다.

4. 결론

Flex 위젯은 플러터에서 Row와 Column의 기반이 되는 위젯으로, 유연한 레이아웃을 설계하는 데 필수적입니다.

이를 통해 다양한 화면 크기와 방향에서 일관된 UI를 구현할 수 있습니다.

Flex의 다양한 속성을 이해하고 활용하면 보다 정교한 레이아웃을 쉽게 구현할 수 있습니다.

 

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

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