플러터 Expanded 위젯 사용법 및 옵션 완벽 가이드

플러터에서 레이아웃을 구성할 때 자주 사용되는 위젯 중 하나는 바로 Expanded 위젯입니다.

Expanded 위젯은 잔여 공간을 채우도록 자식 위젯을 확장하는 데 사용되며, 특히 Row나 Column과 함께 사용하면 효과적입니다.

이 블로그 글에서는 Expanded 위젯의 사용법과 주요 옵션들을 자세히 살펴보고, 실제 코드 예시와 함께 다양한 활용 방법을 알아보겠습니다.

 

1. Expanded 위젯 사용법

 

Expanded 위젯은 단독으로 사용할 수 없으며, 반드시 Row나 Column과 함께 사용해야 합니다.

Expanded 위젯을 사용하면, 잔여 공간을 자식 위젯이 차지하도록 합니다.

즉, Row나 Column의 자식 위젯들 중 Expanded 위젯으로 감싸인 위젯만 잔여 공간을 채우게 됩니다.

 

기본 사용법

Row(
  children: <Widget>[
    Text('텍스트 1'),
    Expanded(
      child: Text('긴 텍스트 2'),
    ),
    Text('텍스트 3'),
  ],
),

 

위 예시에서

• Text('텍스트 1')과 Text('텍스트 3')은 잔여 공간을 차지하지 않고 원래 크기 그대로 유지됩니다.
• Expanded(child: Text('긴 텍스트 2'))는 잔여 공간을 모두 차지하여 '긴 텍스트 2'가 가득 채워집니다.

2. Expanded 위젯 주요 옵션

• flex: 잔여 공간을 차지할 비율을 설정합니다. 기본값은 1입니다.
• fit: 잔여 공간을 채우는 방식을 설정합니다. 기본값은 FlexFit.tight입니다.
  • FlexFit.tight: 가능한 한 꽉 채웁니다.
  • FlexFit.loose: 필요한 만큼만 채웁니다.

옵션 사용 예시:

Row(
  children: <Widget>[
    Text('텍스트 1'),
    Expanded(
      flex: 2, // 잔여 공간의 2배 할당
      child: Text('긴 텍스트 2'),
    ),
    Expanded(
      flex: 1, // 잔여 공간의 1배 할당
      child: Text('텍스트 3'),
    ),
  ],
),

 

위 예시에서

• Expanded(flex: 2, child: Text('긴 텍스트 2'))는 잔여 공간의 2배를 차지하게 됩니다.
• Expanded(flex: 1, child: Text('텍스트 3'))는 잔여 공간의 1배를 차지하게 됩니다.

3. Expanded 위젯 활용 실제 예시

 

다음은 Expanded 위젯을 활용하여 간단한 레이아웃을 구성하는 실제 코드 예시입니다.

 

예시 1: 입력 필드와 버튼 배치

Row(
  children: <Widget>[
    Expanded(
      child: TextField(),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('검색'),
    ),
  ],
),

 

예시 2: 이미지와 텍스트 비율 조정

Column(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Image.network('https://placehold.co/200x300'),
    ),
    Expanded(
      child: Text('설명 텍스트'),
    ),
  ],
),

 

4. 주의 사항

• Expanded 위젯은 Row나 Column과 함께 사용해야 합니다. 단독으로 사용하면 오류가 발생할 수 있습니다.
• Expanded 위젯을 여러 개 사용하는 경우, flex 값을 조절하여 잔여 공간을 적절하게 분배해야 합니다.
• flex 값을 0으로 설정하면 해당 위젯은 잔여 공간을 전혀 차지하지 않게 됩니다.
• fit 옵션을 FlexFit.loose로 설정하면, 잔여 공간이 부족한 경우 자식 위젯이 원래 크기 그대로 유지될 수 있습니다.

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release