기초

Layout

Row, Column, Stack, Container, ListView 같은 위젯으로 화면 배치를 구성합니다.

핵심 개념

Layout 주요 항목

레이아웃의 핵심

Flutter의 레이아웃은 위젯으로 만들어집니다.

언제 쓰나: 이미지, 아이콘, 텍스트처럼 보이는 요소도 위젯이고, Row, Column, Grid처럼 배치하는 요소도 위젯입니다.

Flutter에서: 간단한 위젯을 조합해서 복잡한 위젯을 만드는 것이 Flutter 레이아웃의 기본입니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Row(
      children: const [
        Icon(Icons.view_quilt),
        SizedBox(width: 12),
        Expanded(child: Text('레이아웃의 핵심')),
      ],
    ),
  ),
)

배치 절차

먼저 Center, Row, Column 같은 레이아웃 위젯을 선택합니다.

언제 쓰나: 그 안에 Text, Icon, Image 같은 보이는 위젯을 넣습니다.

Flutter에서: 정렬, 크기, 여백, 중첩을 속성으로 조정합니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Row(
      children: const [
        Icon(Icons.view_quilt),
        SizedBox(width: 12),
        Expanded(child: Text('배치 절차')),
      ],
    ),
  ),
)

시각 자료

구조로 보기

Row 안에 배치된 아이콘과 라벨 예제
아이콘과 텍스트를 Row와 Column으로 배치한 예제 화면입니다.
debugPaintSizeEnabled가 켜진 레이아웃 디버그 화면
레이아웃 경계와 여백을 눈으로 확인할 수 있는 디버그 표시 예시입니다.
Container, Row, Column으로 구성된 위젯 트리
화면이 Container, Row, Column, Icon, Text 위젯으로 조립되는 구조입니다.

확장 개념

단일 위젯 배치 절차

  • 먼저 Center, Align, Padding, Container처럼 자식을 어디에 놓을지 정하는 레이아웃 위젯을 고릅니다.
  • 그 안에 Text, Icon, Image처럼 실제로 보이는 위젯을 넣습니다.
  • 마지막으로 Scaffold의 body 같은 페이지 영역에 배치해 실행 결과를 확인합니다.

확장 개념

여러 위젯 배치

  • 가로 배치는 Row, 세로 배치는 Column으로 시작합니다.
  • 남는 공간 분배는 Expanded와 Flexible로 제어합니다.
  • 겹쳐 보이는 UI는 Stack과 Positioned를 사용하고, 긴 목록은 ListView나 GridView로 분리합니다.

확장 개념

제약 조건

  • Flutter 레이아웃은 부모가 자식에게 제약을 전달하고, 자식이 크기를 정한 뒤, 부모가 위치를 정하는 흐름입니다.
  • Row 안에서 텍스트가 넘치면 Expanded로 최대 너비를 제한해야 합니다.
  • Container는 padding, margin, decoration, constraints를 한곳에서 조정할 때 유용합니다.

상세 설명

더 알아보기

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 차이 이해Container 역할 이해ListView와 GridView 사용 기준 정리
  • 출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
  • Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
  • Flutter UI위젯, 레이아웃, 입력, 내비게이션 흐름을 함께 봅니다.