지난 글에서 위젯이 트리로 이어진다는 걸 봤으니, 이번엔 위젯을 가로, 세로, 겹쳐서 배치하는 방법이다. Compose의 Row, Column, Box와 SwiftUI의 HStack, VStack, ZStack에 해당하는 위젯이 Flutter에도 있다. 이름이 비슷해서 그대로 쓰면 될 것 같은데, 가로로 긴 글자를 넣는 순간 바로 막힌다.

Row(
  children: [
    const Icon(Icons.person),
    const Text('아주아주아주 긴 사용자 이름이 들어가는 자리입니다 아주아주 길어요'),
    const Icon(Icons.chevron_right),
  ],
)

실행하면 화면 오른쪽에 노랑-검정 줄무늬가 생기고, 콘솔에 이런 에러가 찍힌다.

A RenderFlex overflowed by 182 pixels on the right.

Compose였다면 글자가 알아서 줄어들거나 줄바꿈이 됐을 텐데, 왜 화면 밖으로 넘칠까?

원인: Row는 자식에게 "원하는 만큼 가로로 커져도 된다"고 말한다

Flutter 레이아웃은 한 줄로 요약된다. "제약은 아래로 내려가고, 크기는 위로 올라온다." 부모가 자식에게 "너는 이 범위 안에서 크기를 정해라"라는 제약을 내려주고, 자식은 그 안에서 자기 크기를 정해 부모에게 알려준다.

Row는 가로 방향으로 자식을 늘어놓는데, 자식들에게 가로 방향 크기 제한을 주지 않는다. 그래서 Text는 "글자 길이만큼" 크기를 잡아버리고, 합이 화면 폭을 넘으면 overflowed 에러가 난다. 글자를 줄바꿈하려면 "너는 남은 폭까지만 써라"라는 제한을 걸어줘야 한다.

해결: Expanded로 남은 공간을 나눠준다

Row(
  children: [
    const Icon(Icons.person),
    const Expanded(
      child: Text('아주아주아주 긴 사용자 이름이 들어가는 자리입니다 아주아주 길어요'),
    ),
    const Icon(Icons.chevron_right),
  ],
)

Expanded는 **"아이콘 두 개가 쓰고 남은 공간을 전부 이 자식에게 준다"**는 위젯이다. 이제 Text는 남은 폭 안에서 줄바꿈되고 에러가 사라진다. Expanded도 위젯이라 Text를 감싸는 방식으로 쓴다.

비율로 나누는 것도 된다.

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

flex가 비율이라 빨강이 1/3, 파랑이 2/3를 차지한다. Compose의 Modifier.weight(1f), weight(2f)와 같다.

Expanded를 아무 데나 쓰면 에러가 난다

Container(
  child: Expanded( // 여기서 에러남
    child: Text('안녕'),
  ),
)

Incorrect use of ParentDataWidget.

Expanded는 Row, Column, Flex의 직접 자식으로만 쓸 수 있다. "남은 공간"이라는 개념이 Row/Column처럼 한 방향으로 늘어놓는 부모에게만 있기 때문이다. Container 안에 넣으면 나눠줄 공간이 없어서 에러가 난다. 사이에 다른 위젯(Padding 등)을 끼워도 같은 에러가 난다.

Expanded와 Flexible의 차이

Row(
  children: [
    Flexible(child: Text('짧은 글')),     // 필요한 만큼만 쓰고, 넘치면 줄어듦
    Expanded(child: Text('짧은 글')),     // 남은 공간을 무조건 다 채움
  ],
)

Expanded는 사실 Flexible(fit: FlexFit.tight)의 줄임말이다. Flexible은 자식이 작으면 작은 대로 두고, 클 때만 줄여준다. 남은 공간을 꽉 채워야 하면 Expanded, 넘치지만 않게 하려면 Flexible을 쓴다.

Row와 Column 정렬: 주축과 교차축

Column은 세로로 늘어놓는 위젯이고, 정렬은 두 방향으로 나뉜다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,       // 주축(세로) 정렬
  crossAxisAlignment: CrossAxisAlignment.start,      // 교차축(가로) 정렬
  children: [
    Text('제목'),
    Text('내용'),
  ],
)

• 주축(main axis): 자식이 늘어서는 방향. Column은 세로, Row는 가로
• 교차축(cross axis): 그 수직 방향. Column은 가로, Row는 세로

Row로 바꾸면 두 축의 방향이 서로 뒤바뀐다. "가로 정렬은 이거, 세로 정렬은 저거"로 외우지 말고 **"늘어서는 방향이 주축"**으로 기억해야 헷갈리지 않는다.

Stack: 겹쳐 놓기

Stack은 자식을 위로 쌓는다. 먼저 쓴 자식이 아래, 나중에 쓴 자식이 위에 그려진다.

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      right: 8,
      bottom: 8,
      child: const Text('우하단 글자', style: TextStyle(color: Colors.white)),
    ),
  ],
)

Positioned는 Stack의 자식을 "왼쪽에서 얼마, 아래에서 얼마" 식으로 위치를 지정하는 위젯이다. 이것도 Expanded처럼 Stack의 직접 자식일 때만 쓸 수 있다. 위치를 지정하지 않은 자식은 alignment(기본값은 왼쪽 위)에 따라 놓인다.

Stack(
  alignment: Alignment.center, // 위치 지정 없는 자식은 가운데로
  children: [...],
)

프로필 사진 위에 배지를 올리거나, 이미지 위에 글자를 얹을 때 쓴다.

Compose, SwiftUI와 비교하면

// Compose
Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Icon(...)
    Text("이름", modifier = Modifier.weight(1f))
}

// SwiftUI
HStack {
    Image(systemName: "person")
    Text("이름").frame(maxWidth: .infinity)
}

가장 큰 차이는 "남은 공간 차지"가 속성이 아니라 위젯으로 감싸는 방식이라는 점이다. Compose는 Modifier를 붙이고, Flutter는 Expanded로 감싼다. 지난 글에서 Center가 위젯이라고 했던 것과 같은 발상이다.

정리

• Flutter 레이아웃은 "제약은 아래로, 크기는 위로" 흐르고, Row/Column은 자식에게 주축 방향 크기 제한을 주지 않는다
• 긴 글자가 overflowed 에러를 내면 Expanded나 Flexible로 감싸서 남은 공간 안에서 크기를 정하게 한다
• Expanded는 Row/Column의 직접 자식으로만, Positioned는 Stack의 직접 자식으로만 쓸 수 있다
• 정렬은 늘어서는 방향이 주축(mainAxisAlignment), 그 수직 방향이 교차축(crossAxisAlignment)이다
• Stack은 자식을 겹쳐 쌓고, 위치를 정하고 싶으면 Positioned를 쓴다
• Compose의 Row/Column/Box, SwiftUI의 HStack/VStack/ZStack과 1:1로 대응하지만, 크기 조절을 위젯으로 감싸서 한다는 점이 다르다

다음 글에서는 스크롤되는 목록을 만드는 ListView와 GridView를 다뤄보겠다.