Flutter 튜토리얼 6편: 레이아웃 기초

요약#

핵심 요지#

문제 정의: 위젯을 원하는 위치에 배치하려면 레이아웃 규칙을 이해해야 한다.
핵심 주장: Flutter의 레이아웃은 Row¹, Column², 정렬³, 크기 조절⁴의 네 가지 개념으로 구성된다.
주요 근거: 모든 레이아웃 위젯은 단일 자식 또는 다중 자식을 가지며, 위젯 조합으로 복잡한 UI를 구성한다.
실무 기준: Row와 Column을 중첩하고, Expanded⁵로 공간을 분배하며, mainAxisAlignment로 정렬한다.
한계: 무한 제약(Unbounded Constraints) 오류가 자주 발생하므로 주의가 필요하다.

문서가 설명하는 범위#

레이아웃의 기본 원리와 제약 조건 흐름
Row와 Column을 사용한 배치
정렬과 크기 조절 방법
실전 레이아웃 예제

읽는 시간: 18분 | 난이도: 초급

참고 자료#

Layout fundamentals - 레이아웃 핵심 개념
Layouts in Flutter - 레이아웃 위젯 개요
Building layouts - 레이아웃 튜토리얼

문제 상황#

위젯을 화면에 배치할 때 위치와 크기를 정확히 제어하기 어렵습니다.
CSS의 Flexbox나 네이티브의 LayoutManager와 달리 Flutter만의 레이아웃 규칙이 있기 때문입니다.
이 규칙을 모르면 원하는 대로 배치할 수 없습니다.

레이아웃 관련 질문들#

1
- 위젯을 가로로 나란히 배치하려면?
2
- 남은 공간을 균등하게 나누려면?
3
- 위젯을 중앙에 정렬하려면?
4
- 화면 크기에 따라 레이아웃을 바꾸려면?

문제는 다음과 같습니다.

Flutter의 레이아웃 규칙을 모르면 예상과 다른 결과가 나온다.
“Unbounded constraints” 오류가 자주 발생한다.
위젯 간 공간 분배가 직관적이지 않다.

해결 방법#

Flutter의 레이아웃은 위젯 조합으로 구성됩니다.
Row와 Column으로 배치하고, 정렬과 크기 조절로 미세 조정합니다.
이 네 가지만 알면 대부분의 레이아웃을 만들 수 있습니다.

챕터 1: 레이아웃의 기본 원리#

Why#

NOTE
Flutter에서 레이아웃을 이해하려면 제약 조건(Constraints)을 알아야 합니다.
제약 조건이란 무엇일까요?
부모가 자식에게 “이 범위 안에서 크기를 정해”라고 알려주는 것입니다.
flowchart LR A[부모] -->|"최소 100, 최대 200"| B[자식] B -->|"150으로 결정"| A A -->|"여기에 배치"| C[화면]

What#

NOTE
Flutter의 레이아웃은 세 단계로 작동합니다.
첫째, 부모가 자식에게 제약을 전달합니다.
둘째, 자식이 크기를 결정해서 부모에게 알립니다.
셋째, 부모가 자식의 위치를 결정합니다.

How#

TIP
레이아웃 대화 과정
sequenceDiagram participant Parent as 부모 Widget participant Child as 자식 Widget Parent->>Child: 제약 조건 전달 (min/max 크기) Child->>Child: 제약 내에서 크기 결정 Child->>Parent: 결정된 크기 보고 Parent->>Parent: 자식 위치 설정
위젯의 세 가지 크기 동작

동작 설명 예시
최대한 크게 가능한 모든 공간 차지 Center, ListView
자식과 같은 크기 자식 크기에 맞춤 Transform, Opacity
특정 크기 고유 크기 사용 Image, Text
1
// Center: 가능한 모든 공간을 차지하고 자식을 중앙에
2
Center(
3
  child: Text('Hello'),  // Text는 자신의 크기만 사용
4
)
5

6
// Container with size: 특정 크기 지정
7
Container(
8
  width: 200,
9
  height: 100,
10
  child: Text('Hello'),
11
)

동작	설명	예시
최대한 크게	가능한 모든 공간 차지	Center, ListView
자식과 같은 크기	자식 크기에 맞춤	Transform, Opacity
특정 크기	고유 크기 사용	Image, Text

Watch out#

WARNING
SizedBox나 Container로 크기를 지정해도 부모의 제약이 우선합니다. 부모가 허용하는 범위 내에서만 크기가 적용됩니다.
1
// 부모가 최대 100px만 허용하면
2
SizedBox(
3
  width: 200,  // 요청한 크기
4
  // 실제로는 100px만 적용됨
5
)

결론: Flutter 레이아웃은 부모-자식 간 제약 협상으로 작동합니다.

챕터 2: Row와 Column 사용하기#

Why#

NOTE
위젯을 가로나 세로로 배치하는 것은 가장 기본적인 레이아웃입니다.
Row는 자식을 가로로, Column은 세로로 배열합니다.
이 두 가지만 알아도 많은 레이아웃을 만들 수 있습니다.

What#

NOTE
Row는 자식을 수평으로, Column은 수직으로 배치합니다.
둘 다 여러 자식을 받을 수 있습니다.
children 속성에 위젯 목록을 전달하면 됩니다.

How#

TIP
Row: 가로 배치
1
Row(
2
  children: [
3
    Icon(Icons.star),
4
    Icon(Icons.star),
5
    Icon(Icons.star),
6
  ],
7
)
Column: 세로 배치
1
Column(
2
  children: [
3
    Text('첫 번째'),
4
    Text('두 번째'),
5
    Text('세 번째'),
6
  ],
7
)
Row와 Column 중첩
1
Row(
2
  children: [
3
    Column(
4
      children: [
5
        Icon(Icons.star),
6
        Text('Dash 1'),
7
      ],
8
    ),
9
    Column(
10
      children: [
11
        Icon(Icons.star),
12
        Text('Dash 2'),
13
      ],
14
    ),
15
    Column(
16
      children: [
17
        Icon(Icons.star),
18
        Text('Dash 3'),
19
      ],
20
    ),
21
  ],
22
)
축(Axis) 개념

위젯 주축(Main Axis) 교차축(Cross Axis)
Row 수평 (→) 수직 (↓)
Column 수직 (↓) 수평 (→)
graph LR subgraph Row A["← Cross Axis ↓"] B["Main Axis →"] end subgraph Column C["← Cross Axis →"] D["Main Axis ↓"] end

위젯	주축(Main Axis)	교차축(Cross Axis)
Row	수평 (→)	수직 (↓)
Column	수직 (↓)	수평 (→)

Watch out#

WARNING

Row나 Column의 자식이 주축 방향으로 무한한 공간을 차지하려 하면 오류가 발생합니다.

1
// 오류: Row 안에 스크롤되지 않는 ListView
2
Row(
3
  children: [
4
    ListView(...),  // ListView가 무한 너비를 요청!
5
  ],
6
)
7

8
// 해결: Expanded로 감싸기
9
Row(
10
  children: [
11
    Expanded(child: ListView(...)),
12
  ],
13
)

결론: Row는 가로, Column은 세로 배치이며, 중첩해서 복잡한 레이아웃을 구성합니다.

챕터 3: 정렬하기#

Why#

NOTE
Row나 Column에 자식을 배치하면 기본적으로 시작점에 몰립니다.
균등하게 배치하거나 중앙에 정렬하려면 어떻게 해야 할까요?
정렬 속성을 사용하면 됩니다.

What#

NOTE
mainAxisAlignment는 주축 방향 정렬, crossAxisAlignment는 교차축 방향 정렬을 제어합니다.

How#

TIP
MainAxisAlignment 옵션

옵션 설명
start 시작점에 정렬 (기본값)
end 끝점에 정렬
center 중앙에 정렬
spaceBetween 양끝에 붙이고 사이 균등
spaceAround 각 요소 주변에 균등 간격
spaceEvenly 모든 간격이 동일
1
Row(
2
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
3
  children: [
4
    Icon(Icons.star),
5
    Icon(Icons.star),
6
    Icon(Icons.star),
7
  ],
8
)
시각적 비교
1
start:       [★★★        ]
2
end:         [        ★★★]
3
center:      [   ★★★   ]
4
spaceBetween:[★   ★   ★]
5
spaceAround: [ ★  ★  ★ ]
6
spaceEvenly: [  ★  ★  ★  ]
CrossAxisAlignment 옵션

옵션 설명
start 교차축 시작점 정렬
end 교차축 끝점 정렬
center 교차축 중앙 정렬 (기본값)
stretch 교차축 방향으로 늘리기
baseline 텍스트 기준선 정렬
1
Row(
2
  crossAxisAlignment: CrossAxisAlignment.start,
3
  children: [
4
    Container(height: 50, child: Text('작음')),
5
    Container(height: 100, child: Text('큼')),
6
  ],
7
)

옵션	설명
`start`	시작점에 정렬 (기본값)
`end`	끝점에 정렬
`center`	중앙에 정렬
`spaceBetween`	양끝에 붙이고 사이 균등
`spaceAround`	각 요소 주변에 균등 간격
`spaceEvenly`	모든 간격이 동일

옵션	설명
`start`	교차축 시작점 정렬
`end`	교차축 끝점 정렬
`center`	교차축 중앙 정렬 (기본값)
`stretch`	교차축 방향으로 늘리기
`baseline`	텍스트 기준선 정렬

Watch out#

WARNING
crossAxisAlignment: CrossAxisAlignment.stretch를 사용하면 자식이 교차축 방향으로 늘어납니다. 자식에 고정 크기가 있으면 충돌할 수 있습니다.
1
Row(
2
  crossAxisAlignment: CrossAxisAlignment.stretch,
3
  children: [
4
    Container(height: 50),  // height가 무시되고 늘어남
5
  ],
6
)

결론: mainAxisAlignment와 crossAxisAlignment로 위젯 배치를 정밀하게 제어합니다.

챕터 4: 크기 조절하기#

Why#

NOTE
Row나 Column에서 자식들이 공간을 어떻게 나눌지 제어해야 합니다.
한 위젯이 남은 공간을 모두 차지하거나, 비율대로 나누는 상황이 있죠.
Expanded와 flex 속성으로 이를 제어할 수 있습니다.

What#

NOTE
Expanded는 자식이 남은 공간을 차지하게 합니다.
flex 속성으로 비율을 조절할 수 있습니다.
Flexible은 비슷하지만 자식이 원하는 크기보다 작을 수도 있습니다.

How#

TIP

Expanded: 남은 공간 채우기

1
Row(
2
  children: [
3
    Container(width: 100, color: Colors.red),
4
    Expanded(
5
      child: Container(color: Colors.blue),  // 남은 공간 전체
6
    ),
7
  ],
8
)

flex로 비율 조절

1
Row(
2
  children: [
3
    Expanded(
4
      flex: 1,  // 1/4
5
      child: Container(color: Colors.red),
6
    ),
7
    Expanded(
8
      flex: 2,  // 2/4
9
      child: Container(color: Colors.green),
10
    ),
11
    Expanded(
12
      flex: 1,  // 1/4
13
      child: Container(color: Colors.blue),
14
    ),
15
  ],
16
)

시각적 표현

1
flex: 1, 2, 1
2
[  red  |    green    |  blue  ]
3
  25%         50%         25%

Flexible vs Expanded

속성	Expanded	Flexible
최소 크기	남은 공간 전체	자식이 원하는 크기
최대 크기	남은 공간 전체	남은 공간까지
사용 상황	공간 균등 분배	자식 크기 유지하면서 확장 허용

1
// Flexible: 자식이 원하는 만큼만
2
Row(
3
  children: [
4
    Flexible(
5
      child: Container(
6
        width: 50,  // 이 크기 유지 가능
7
        color: Colors.blue,
8
      ),
9
    ),
10
  ],
11
)

Watch out#

WARNING

Expanded나 Flexible은 Row, Column, Flex의 직접 자식이어야 합니다. 다른 위젯으로 감싸면 오류가 발생합니다.

1
// 오류: Expanded가 Row의 직접 자식이 아님
2
Row(
3
  children: [
4
    Padding(
5
      padding: EdgeInsets.all(8),
6
      child: Expanded(...),  // 오류!
7
    ),
8
  ],
9
)
10

11
// 해결: Expanded를 바깥으로
12
Row(
13
  children: [
14
    Expanded(
15
      child: Padding(
16
        padding: EdgeInsets.all(8),
17
        child: ...,
18
      ),
19
    ),
20
  ],
21
)

결론: Expanded와 flex로 공간 분배를 제어하고, 직접 자식 규칙을 지킵니다.

챕터 5: 단일 자식 레이아웃 위젯#

Why#

NOTE
Row와 Column 외에도 단일 자식을 다루는 레이아웃 위젯이 있습니다.
Container, Center, Padding 등이 대표적입니다.
이 위젯들로 여백을 주거나 크기를 지정할 수 있습니다.

What#

NOTE
단일 자식 레이아웃 위젯은 child 속성으로 하나의 자식만 받습니다.
자식을 정렬하거나, 크기를 조정하거나, 장식하는 역할을 합니다.
여러 개의 자식이 필요하면 Row나 Column을 사용합니다.

How#

TIP

주요 단일 자식 위젯

위젯	역할
`Center`	자식을 중앙에 배치
`Padding`	자식 주변에 여백 추가
`Container`	크기, 여백, 배경, 테두리 설정
`SizedBox`	고정 크기 지정
`Align`	자식을 특정 위치에 배치
`FractionallySizedBox`	부모 대비 비율로 크기 지정

Container 활용

1
Container(
2
  width: 200,
3
  height: 100,
4
  padding: EdgeInsets.all(16),
5
  margin: EdgeInsets.all(8),
6
  decoration: BoxDecoration(
7
    color: Colors.blue,
8
    borderRadius: BorderRadius.circular(8),
9
    boxShadow: [
10
      BoxShadow(
11
        color: Colors.black26,
12
        blurRadius: 4,
13
        offset: Offset(2, 2),
14
      ),
15
    ],
16
  ),
17
  child: Text('Hello'),
18
)

SizedBox 활용

1
// 고정 크기 박스
2
SizedBox(
3
  width: 100,
4
  height: 50,
5
  child: Text('Fixed'),
6
)
7

8
// 빈 공간 (간격용)
9
SizedBox(height: 16),  // 세로 간격
10
SizedBox(width: 8),    // 가로 간격

Align 활용

1
Align(
2
  alignment: Alignment.topRight,
3
  child: Text('오른쪽 상단'),
4
)
5

6
// Alignment 옵션
7
// topLeft, topCenter, topRight
8
// centerLeft, center, centerRight
9
// bottomLeft, bottomCenter, bottomRight

Watch out#

WARNING
Container는 강력하지만 무겁습니다. 단순한 여백만 필요하면 Padding을, 크기만 필요하면 SizedBox를 사용하세요.
1
// 불필요하게 무거움
2
Container(
3
  padding: EdgeInsets.all(8),
4
  child: Text('Hello'),
5
)
6

7
// 가벼운 대안
8
Padding(
9
  padding: EdgeInsets.all(8),
10
  child: Text('Hello'),
11
)

결론: 목적에 맞는 단일 자식 위젯을 선택하면 코드가 간결해집니다.

챕터 6: 스크롤 레이아웃#

Why#

NOTE
콘텐츠가 화면보다 크면 어떻게 될까요?
스크롤이 필요합니다.
ListView나 SingleChildScrollView로 스크롤을 구현할 수 있습니다.

What#

NOTE
스크롤 위젯은 자식이 화면을 넘어갈 때 자동으로 스크롤을 제공합니다.
ListView는 많은 항목이 있을 때 사용합니다.
SingleChildScrollView는 단일 콘텐츠에 적합합니다.

How#

TIP

SingleChildScrollView: 단일 콘텐츠 스크롤

1
SingleChildScrollView(
2
  child: Column(
3
    children: [
4
      Text('긴 콘텐츠...'),
5
      Image.asset('large_image.png'),
6
      Text('더 많은 콘텐츠...'),
7
    ],
8
  ),
9
)

ListView: 목록 스크롤

1
ListView(
2
  children: [
3
    ListTile(title: Text('항목 1')),
4
    ListTile(title: Text('항목 2')),
5
    ListTile(title: Text('항목 3')),
6
  ],
7
)

ListView.builder: 동적 목록

많은 항목이 있을 때 화면에 보이는 것만 생성합니다.

1
ListView.builder(
2
  itemCount: 100,
3
  itemBuilder: (context, index) {
4
    return ListTile(
5
      title: Text('항목 $index'),
6
    );
7
  },
8
)

스크롤 방향 변경

1
ListView(
2
  scrollDirection: Axis.horizontal,  // 가로 스크롤
3
  children: [...],
4
)

Watch out#

WARNING

Column 안에 ListView를 넣으면 “Unbounded constraints” 오류가 발생합니다. Expanded나 SizedBox로 높이를 제한해야 합니다.

1
// 오류: Column 안의 ListView
2
Column(
3
  children: [
4
    ListView(...),  // 오류!
5
  ],
6
)
7

8
// 해결 1: Expanded 사용
9
Column(
10
  children: [
11
    Expanded(child: ListView(...)),
12
  ],
13
)
14

15
// 해결 2: SizedBox로 높이 지정
16
Column(
17
  children: [
18
    SizedBox(
19
      height: 200,
20
      child: ListView(...),
21
    ),
22
  ],
23
)

결론: 스크롤이 필요하면 ListView나 SingleChildScrollView를 사용하고, 높이 제한에 주의합니다.

챕터 7: 실전 레이아웃 예제#

Why#

NOTE
지금까지 배운 개념을 조합해서 실제 앱 화면을 만들어 봅시다.
이미지, 제목, 버튼, 설명이 있는 상세 화면을 구성합니다.
실전 예제를 통해 레이아웃의 감을 익힐 수 있습니다.

What#

NOTE
실전 레이아웃은 여러 위젯을 계층적으로 조합해서 구성합니다. 먼저 레이아웃을 그림으로 분석하고, 위젯으로 변환합니다.

How#

TIP
레이아웃 분석
1
┌─────────────────────────┐
2
│       [이미지]          │
3
├─────────────────────────┤
4
│ 제목              ★ 41  │
5
│ 위치                    │
6
├─────────────────────────┤
7
│  📞 CALL  🗺️ ROUTE  📤 SHARE │
8
├─────────────────────────┤
9
│ 설명 텍스트...          │
10
└─────────────────────────┘
코드 구현
1
class DetailScreen extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Scaffold(
5
      appBar: AppBar(title: Text('레이아웃 예제')),
6
      body: SingleChildScrollView(
7
        child: Column(
8
          children: [
9
            // 이미지 섹션
10
            Image.asset(
11
              'images/lake.jpg',
12
              height: 240,
13
              width: double.infinity,
14
              fit: BoxFit.cover,
15
            ),
16

17
            // 제목 섹션
18
            _buildTitleSection(),
19

20
            // 버튼 섹션
21
            _buildButtonSection(context),
22

23
            // 설명 섹션
24
            _buildTextSection(),
25
          ],
26
        ),
27
      ),
28
    );
29
  }
30

31
  Widget _buildTitleSection() {
32
    return Padding(
33
      padding: EdgeInsets.all(32),
34
      child: Row(
35
        children: [
36
          Expanded(
37
            child: Column(
38
              crossAxisAlignment: CrossAxisAlignment.start,
39
              children: [
40
                Text(
41
                  '호수 캠핑장',
42
                  style: TextStyle(fontWeight: FontWeight.bold),
43
                ),
44
                SizedBox(height: 8),
45
                Text(
46
                  '스위스, 칸더슈테그',
47
                  style: TextStyle(color: Colors.grey[500]),
48
                ),
49
              ],
50
            ),
51
          ),
52
          Icon(Icons.star, color: Colors.red),
53
          SizedBox(width: 4),
54
          Text('41'),
55
        ],
56
      ),
57
    );
58
  }
59

60
  Widget _buildButtonSection(BuildContext context) {
61
    final color = Theme.of(context).primaryColor;
62
    return Row(
63
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
64
      children: [
65
        _buildButtonColumn(color, Icons.call, 'CALL'),
66
        _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
67
        _buildButtonColumn(color, Icons.share, 'SHARE'),
68
      ],
69
    );
70
  }
71

72
  Widget _buildButtonColumn(Color color, IconData icon, String label) {
73
    return Column(
74
      mainAxisSize: MainAxisSize.min,
75
      children: [
76
        Icon(icon, color: color),
77
        SizedBox(height: 8),
78
        Text(
79
          label,
80
          style: TextStyle(fontSize: 12, color: color),
81
        ),
82
      ],
83
    );
84
  }
85

86
  Widget _buildTextSection() {
87
    return Padding(
88
      padding: EdgeInsets.all(32),
89
      child: Text(
90
        '호수 캠핑장은 아름다운 알프스 산맥에 위치하고 있습니다. '
91
        '맑은 호수와 신선한 공기, 그리고 멋진 하이킹 코스가 있습니다.',
92
        softWrap: true,
93
      ),
94
    );
95
  }
96
}
레이아웃 구조도
graph TD A[Scaffold] --> B[SingleChildScrollView] B --> C[Column] C --> D[Image] C --> E[TitleSection - Row] C --> F[ButtonSection - Row] C --> G[TextSection - Padding] E --> H[Expanded - Column] E --> I[Icon + Text] F --> J[ButtonColumn 1] F --> K[ButtonColumn 2] F --> L[ButtonColumn 3]

Watch out#

WARNING
레이아웃 코드가 길어지면 위젯을 별도 메서드나 클래스로 분리하세요. 재사용성과 가독성이 좋아집니다.
1
// 메서드로 분리
2
Widget _buildTitleSection() { ... }
3

4
// 또는 별도 클래스로 분리
5
class TitleSection extends StatelessWidget { ... }

결론: 레이아웃을 분석하고, 위젯을 조합하고, 필요하면 분리해서 관리합니다.

한계#

Flutter 레이아웃에는 주의할 점이 있습니다.
처음에는 어려울 수 있지만 연습하면 익숙해집니다.

Unbounded Constraints: Row/Column 안에 ListView를 넣는 등의 상황에서 자주 발생합니다.
중첩 깊이: 복잡한 레이아웃은 위젯 중첩이 깊어져 코드 가독성이 떨어질 수 있습니다.
학습 곡선: CSS Flexbox와 비슷하지만 완전히 같지 않아 적응이 필요합니다.

Row(로우): 자식 위젯들을 가로 방향으로 배치하는 레이아웃 위젯이다. ↩
Column(컬럼): 자식 위젯들을 세로 방향으로 배치하는 레이아웃 위젯이다. ↩
Alignment(정렬): mainAxisAlignment와 crossAxisAlignment로 위젯 배치를 제어하는 속성이다. ↩
Sizing(크기 조절): Expanded, Flexible, SizedBox 등으로 위젯 크기를 제어하는 방법이다. ↩
Expanded(익스팬디드): Row나 Column에서 자식이 남은 공간을 채우도록 확장하는 위젯이다. ↩

Flutter 튜토리얼 6편: 레이아웃 기초

요약#

핵심 요지#

문서가 설명하는 범위#

참고 자료#

문제 상황#

레이아웃 관련 질문들#

해결 방법#

챕터 1: 레이아웃의 기본 원리#

Why#

What#

How#

Watch out#

챕터 2: Row와 Column 사용하기#

Why#

What#

How#

Watch out#

챕터 3: 정렬하기#

Why#

What#

How#

Watch out#

챕터 4: 크기 조절하기#

Why#

What#

How#

Watch out#

챕터 5: 단일 자식 레이아웃 위젯#

Why#

What#

How#

Watch out#

챕터 6: 스크롤 레이아웃#

Why#

What#

How#

Watch out#

챕터 7: 실전 레이아웃 예제#

Why#

What#

How#

Watch out#

한계#

Footnotes#

공유

목차