기초

레이아웃

Row, Column, Stack, Expanded, ListView로 화면 구조를 만듭니다.

개념 먼저 보기

레이아웃의 기본 개념부터 잡기

레이아웃 문서는 먼저 용어의 뜻을 잡고, 그 다음 Flutter 코드에서 어디에 쓰이는지 연결해서 읽는 것이 좋습니다.

아래 항목들은 이 문서에서 다루는 내용을 작은 단위로 나눈 것입니다. 각 항목을 읽은 뒤 예제를 보면 코드가 훨씬 덜 추상적으로 느껴집니다.

종류별로 하나씩

레이아웃에서 나눠 볼 핵심 요소

축과 정렬

Row는 가로 방향, Column은 세로 방향으로 자식을 배치합니다.

언제 쓰나: mainAxisAlignment는 주축 정렬, crossAxisAlignment는 교차축 정렬을 제어합니다.

Flutter에서: Padding과 SizedBox는 여백과 고정 크기를 표현할 때 자주 씁니다.

// 레이아웃 예제입니다.
// 먼저 코드의 큰 흐름을 보고, 주석을 따라 각 줄의 역할을 확인하세요.
Row(
  children: const [
    Icon(Icons.book),
    SizedBox(width: 8),
    Expanded(child: Text('Flutter layout')),
  ],
)

공간 분배

Expanded는 남는 공간을 채우도록 자식 크기를 조정합니다.

언제 쓰나: Flexible은 자식이 더 유연하게 공간을 차지하게 합니다.

Flutter에서: ListView.builder는 긴 목록을 효율적으로 렌더링합니다.

// 레이아웃 예제입니다.
// 먼저 코드의 큰 흐름을 보고, 주석을 따라 각 줄의 역할을 확인하세요.
Row(
  children: const [
    Icon(Icons.book),
    SizedBox(width: 8),
    Expanded(child: Text('Flutter layout')),
  ],
)

부연 설명

축과 정렬

Row는 가로 방향, Column은 세로 방향으로 자식을 배치합니다.
mainAxisAlignment는 주축 정렬, crossAxisAlignment는 교차축 정렬을 제어합니다.
Padding과 SizedBox는 여백과 고정 크기를 표현할 때 자주 씁니다.

부연 설명

공간 분배

Expanded는 남는 공간을 채우도록 자식 크기를 조정합니다.
Flexible은 자식이 더 유연하게 공간을 차지하게 합니다.
ListView.builder는 긴 목록을 효율적으로 렌더링합니다.

깊게 이해하기

Flutter 레이아웃은 부모가 제약을 내려보내고 자식이 크기를 정한 뒤 부모가 위치를 정하는 방식으로 이해하면 쉽습니다.

Row와 Column에서 overflow가 나는 이유는 대개 자식이 가질 수 있는 최대 너비를 제한하지 않았기 때문입니다. Expanded나 Flexible은 이런 문제를 해결하는 대표 도구입니다.

상세 예제

텍스트가 길어도 넘치지 않는 목록 타일 레이아웃 예제입니다.

Row(
  children: [
    const Icon(Icons.article),
    const SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('긴 문서 제목도 안전하게 표시됩니다.'),
          Text('Expanded가 남은 너비를 제한합니다.'),
        ],
      ),
    ),
  ],
)

실무에서 주의할 점

Row 안의 긴 Text에는 Expanded를 자주 함께 사용합니다.
스크롤이 필요한 화면에는 Column보다 ListView나 CustomScrollView를 고려하세요.
MediaQuery보다 LayoutBuilder가 컴포넌트 단위 반응형에 더 적합할 때가 많습니다.

실습 체크리스트

Row/Column 사용Expanded로 공간 채우기ListView 목록 만들기

레이아웃 예제

Row(
  children: const [
    Icon(Icons.book),
    SizedBox(width: 8),
    Expanded(child: Text('Flutter layout')),
  ],
)