쏘니의 개발블로그

Flexible 위젯은 Flutter에서 부모 위젯의 공간을 자식 위젯이 유연하게 사용할 수 있도록 조정하는 레이아웃 위젯입니다. 주로 Row, Column, Flex와 같은 부모 위젯 내에서 사용됩니다. 자식 위젯이 부모 위젯의 공간을 얼마나 차지할지 결정할 수 있습니다.

주요 속성

1. flex: 자식 위젯이 차지할 공간의 비율을 지정합니다. 기본값은 1입니다.

2. fit: 자식 위젯이 남은 공간을 채우는 방식입니다. 기본값은 FlexFit.loose입니다.

FlexFit 옵션

• FlexFit.loose: 자식 위젯이 최소한의 공간을 차지합니다.

• FlexFit.tight: 자식 위젯이 가능한 모든 공간을 차지합니다.

body: Container(
  child: Row(
    children: [
      Flexible(
        flex: 1,
        child: Container(
          color: Colors.lightBlue,
        )
      ),
      Flexible(
          flex: 1,
          child: Container(
            color: Colors.yellow,
          )
      ),
    ],
  ),
)

주요 포인트

1. flex 속성: flex 속성은 자식 위젯이 부모 위젯의 공간을 얼마나 차지할지 비율로 지정합니다.

flex 값이 예를 들어 각각 1, 2, 3으로 설정되어 있어 전체 높이가 6 등분으로 나눠지고, 각 컨테이너가 차지하는 공간은 1/6, 2/6, 3/6입니다.

2. fit 속성: fit 속성은 자식 위젯이 남은 공간을 채우는 방식을 지정합니다.

• FlexFit.loose: 자식 위젯이 최소한의 공간을 차지합니다.

• FlexFit.tight: 자식 위젯이 가능한 모든 공간을 차지합니다.

Flexible과 Expanded 비교

Flexible과 Expanded는 비슷한 역할을 하지만, Expanded는 Flexible을 더 엄격하게 적용한 것입니다.

body: Container(
  child: Column(
    children: [
      Expanded(
        flex: 1,
        child: Container(
          color: Colors.lightBlue,
        )
      ),
      Expanded(
        flex: 1,
        child: Container(
          color: Colors.yellow,
        )
      ),
    ],
  ),
),