Flutter에서 레이아웃은 어떻게 작동하나요?

Question

Accepted Answer

Flutter는 자식을 배치하는 **레이아웃 위젯** — **Row**, **Column**, **Container**, **Stack** 등 — 을 조합하여 레이아웃을 만듭니다. 이러한 레이아웃 위젯과 그것들이 어떻게 결합되는지를 이해하는 것은 UI 구조를 만드는 데 근본적입니다.

## 핵심 레이아웃 위젯

```text
ROW → 자식을 수평으로 배치 (왼쪽에서 오른쪽)
COLUMN → 자식을 수직으로 배치 (위에서 아래)
CONTAINER → 박스: padding, margin, 크기, 색상, 장식, 정렬 (매우 흔함)
STACK → 자식을 서로 위에 겹침 (z축, 위치 지정)
PADDING → 자식 주위에 공간 추가
CENTER → 자식을 중앙 정렬
EXPANDED / FLEXIBLE → 자식이 사용 가능한 공간을 채우게 함 (Row/Column 내에서)
SizedBox → 고정 크기 박스 / 간격
ListView → 스크롤 가능한 자식 목록
```

## 레이아웃 조합하기

```dart
Column(                          // 수직 배치
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title'),
    SizedBox(height: 8),         // 간격
    Row(                         // 수평 배치
      children: [
        Icon(Icons.star),
        Expanded(                // 남은 수평 공간을 차지
          child: Text('Description'),
        ),
      ],
    ),
    Container(                   // 스타일이 적용된 박스
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text('Boxed'),
    ),
  ],
)
```

## 유연한 레이아웃 (Row/Column의 main 및 cross 축)

```text
→ MAIN 축(Row=수평, Column=수직): mainAxisAlignment가 자식을 그 축을 따라 배치
  (start, center, end, spaceBetween 등)
→ CROSS 축(수직 방향): crossAxisAlignment
→ EXPANDED/FLEXIBLE → 자식이 사용 가능한 공간을 비례적으로 공유 (반응형 레이아웃)
→ 유연하고 반응형인 UI를 위해 이것들을 조합합니다.
```

## 왜 중요한가

Flutter에서 레이아웃이 어떻게 작동하는지 이해하는 것은 근본적입니다. 왜냐하면 **UI 요소를 배치하는 것은 모든 인터페이스를 만드는 데 필수적**이기 때문이며, 따라서 Flutter 개발에 반드시 알아야 할 실용 지식입니다.

Flutter는 **레이아웃 위젯을 조합**하여 레이아웃을 만들며, **핵심 레이아웃 위젯**(수평 배치를 위한 Row, 수직을 위한 Column, padding/margin/장식이 있는 스타일 박스를 위한 Container, 겹침을 위한 Stack, 위치 지정을 위한 Padding과 Center, 공간 채우기를 위한 Expanded/Flexible, 스크롤 목록을 위한 ListView)을 이해하는 것은 어떤 UI 구조든 구성하는 데 필요합니다.

이러한 위젯은 모든 Flutter 앱에서 끊임없이 사용됩니다.

이것들을 **어떻게 조합하는지**(행, 열, 컨테이너 등을 중첩하여 단순한 조각으로 복잡한 레이아웃을 만드는 것)를 이해하는 것은 Flutter UI를 만드는 근본적인 관행입니다 — Flutter 전체의 기반이 되는 동일한 조합 원리를 레이아웃에 적용한 것입니다.

**유연한 레이아웃 모델** — Row와 Column의 **main 및 cross 축**(자식 배치를 위한 mainAxisAlignment와 crossAxisAlignment)과 사용 가능한 공간을 비례적으로 공유하는 **Expanded/Flexible**(다양한 화면 크기에 적응하는 반응형 레이아웃 가능) — 을 이해하는 것은 모바일 앱의 핵심 관심사인 여러 기기에서 잘 보이는 레이아웃을 만드는 데 중요합니다.

모든 Flutter 인터페이스를 만들려면 레이아웃 위젯으로 요소를 배치해야 하며, 핵심 레이아웃 위젯, 조합 방법, 유연한/반응형 레이아웃 모델을 이해하는 것이 UI 구성에 필수적이므로, Flutter에서 레이아웃이 어떻게 작동하는지 이해하는 것은 필수적이고 기초적인 실용 지식입니다 — 모든 Flutter 화면에서 사용되는 핵심 기술이자, 디자인을 작동하는 반응형 인터페이스로 옮기는 데 필요하며, 일상적인 Flutter 개발에 근본적입니다.