Expanded와 Flexible 위젯으로 공간 분배하기

Expanded와 Flexible 위젯 마스터하기를 시작합니다.

• 플러터(Flutter) 시작을 위한 다트(Dart) 강좌는 19강 단위 테스트 강좌를 끝으로 종료가 되었습니다.
• 플러터(Flutter) 프로젝트 시작 전 디자인을 위한 레이아웃 강좌를 지속적으로 연재 중입니다.

Flutter에서 Expanded와 Flexible 위젯 마스터하기

• Flutter 개발을 하다 보면 레이아웃을 구성할 때 Expanded와 Flexible 위젯을 자주 사용하게 됩니다.
• 이 두 위젯은 매우 유용하지만, 차이점을 정확히 이해하고 적절히 사용하는 것이 중요합니다.
• 이번 포스팅서는 Expanded와 Flexible 위젯의 특징, 사용법, 그리고 실제 개발 시 고려해야 할 점들을 자세히 알아보겠습니다.

Expanded 위젯 이해하기

• Expanded 위젯은 자식 위젯이 사용 가능한 공간을 모두 차지하도록 강제합니다.
• 주로 Row, Column, Flex 내부에서 사용되며, 부모 위젯의 주축(main axis)을 따라 남은 공간을 채웁니다.

Expanded 위젯의 주요 특징:

1. 공간 채우기: Expanded는 항상 사용 가능한 모든 공간을 채웁니다.
2. flex 속성: 여러 Expanded 위젯이 있을 때 공간 분배 비율을 결정합니다.
3. 자식 위젯 필수: Expanded는 반드시 하나의 자식 위젯을 가져야 합니다.

Expanded 사용 예시:

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)

• 이 예시에서 빨간색 컨테이너는 파란색 컨테이너의 두 배 너비를 차지합니다.

Flexible 위젯 이해하기

• Flexible 위젯은 Expanded와 유사하지만, 더 유연한 레이아웃 조정을 제공합니다.
• Flexible은 자식 위젯이 사용 가능한 공간을 모두 채우도록 강제하지 않습니다.

Flexible 위젯의 주요 특징:

1. 유연한 크기 조정: 자식 위젯의 원래 크기를 존중하면서 필요에 따라 확장합니다.
2. fit 속성: FlexFit.loose (기본값)와 FlexFit.tight 옵션을 제공합니다.
3. flex 속성: Expanded와 마찬가지로 공간 분배 비율을 결정합니다.

Flexible 사용 예시:

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.green,
        height: 50,
        width: 50,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.yellow,
        height: 50,
        width: 100,
      ),
    ),
  ],
)

• 이 예시에서 녹색 컨테이너와 노란색 컨테이너는 각각의 원래 크기를 유지하면서 남은 공간을 flex 비율에 따라 분배받습니다.

Expanded와 Flexible의 차이점

• 공간 채우기:
  • Expanded: 항상 사용 가능한 모든 공간을 채웁니다.
  • Flexible: fit 속성에 따라 공간을 채울 수도 있고, 자식의 원래 크기를 유지할 수도 있습니다.
• 자식 위젯 크기:
  • Expanded: 자식 위젯의 원래 크기를 무시하고 확장합니다.
  • Flexible: 자식 위젯의 원래 크기를 고려합니다.
• fit 속성:
  • Expanded: 항상 FlexFit.tight로 동작합니다.
  • Flexible: FlexFit.loose (기본값)와 FlexFit.tight 중 선택할 수 있습니다.

실제 개발 시 고려사항

• 성능 최적화:
  Expanded와 Flexible은 레이아웃 계산에 추가적인 비용이 들 수 있습니다. 복잡한 레이아웃에서는 과도한 사용을 피하고, 가능한 경우 정적 크기를 사용하는 것이 좋습니다.
• 반응형 디자인:
  화면 크기에 따라 동적으로 조정되는 레이아웃을 만들 때 Expanded와 Flexible은 매우 유용합니다. 다양한 디바이스에 대응하는 UI를 구현할 때 적극 활용하세요.
• 중첩 사용:
  Expanded와 Flexible을 중첩해서 사용할 때는 주의가 필요합니다. 복잡한 레이아웃에서는 예상치 못한 결과가 나올 수 있으므로, 단계적으로 테스트하며 구현하는 것이 좋습니다.
• 디버깅:
  레이아웃 문제가 발생했을 때 Flutter Inspector를 활용하여 각 위젯의 크기와 제약 조건을 확인하세요. 이는 Expanded와 Flexible의 동작을 이해하는 데 큰 도움이 됩니다.
• 접근성:
  Expanded와 Flexible을 사용할 때 접근성을 고려해야 합니다. 특히 텍스트 크기 조정과 관련하여, 동적으로 변하는 콘텐츠에 대해 적절한 대응이 필요합니다.

고급 사용 기법

• AnimatedContainer와 결합:
  Expanded나 Flexible을 AnimatedContainer와 함께 사용하면 부드러운 크기 변화 애니메이션을 구현할 수 있습니다.

AnimatedContainer(
  duration: Duration(seconds: 1),
  child: Expanded(
    flex: _isExpanded ? 2 : 1,
    child: Container(color: Colors.purple),
  ),
)

• CustomScrollView와 SliverFillRemaining:
  스크롤 가능한 레이아웃에서 남은 공간을 채우고 싶을 때 SliverFillRemaining을 사용할 수 있습니다. 이는 Expanded의 개념을 CustomScrollView에 적용한 것과 유사합니다.
• LayoutBuilder 활용:
  LayoutBuilder를 사용하면 부모 위젯의 제약 조건에 따라 동적으로 Expanded나 Flexible의 사용을 결정할 수 있습니다.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Expanded(child: MyWidget());
    } else {
      return Flexible(child: MyWidget());
    }
  },
)

맺음말

• Expanded와 Flexible 위젯은 Flutter에서 유연하고 반응형 있는 레이아웃을 구현하는 데 핵심적인 역할을 합니다.
• 두 위젯의 차이점을 정확히 이해하고, 적절한 상황에 맞게 사용하는 것이 중요합니다.
• Expanded는 가용 공간을 모두 채워야 할 때, Flexible은 더 유연한 크기 조정이 필요할 때 사용하면 됩니다.
• 실제 개발에서는 이 두 위젯을 적절히 조합하여 사용하는 것이 좋습니다.
• 복잡한 레이아웃에서는 단계적으로 구현하고 테스트하며, Flutter의 개발자 도구를 활용하여 레이아웃 문제를 디버깅하세요.
• 또한, 성능과 접근성을 항상 고려하면서 개발하는 것이 중요합니다.
• 다음 포스팅에서는 Stack과 Positioned 위젯으로 겹침 레이아웃 구현하기 강좌로 돌아오도록 하겠습니다.