Flutter 위젯 시리즈 005 – Row 완전 이해하기

 

🗂️ Widget Catalog Index

├ Basics  
├ Layout  
│   └ Multi-child layout widgets  
│       └ ✅ Row ← 현재 문서  
├ Text  
...
└ Accessibility  

 

 

---

지난 시간에는

 

세로 방향으로

 

위젯을 쌓는 Column과

 

버튼을 다뤄봤죠.

 

 

 

 

이번에는

 

수평 방향으로

위젯을 나란히 배치할 때

 

가장 기본이 되는

 

Row 위젯을

 

깊이 있게 살펴보겠습니다.

 

 

 

 

 

 

UI를 만들다 보면

 

메뉴 아이콘과

 

제목을

 

한 줄에 배치하거나,

 

 

 

 

 

버튼 옆에

 

아이콘을 넣는 등

 

수평 정렬이

 

정말 자주 등장합니다.

 

 

 

 

 

그래서

Row는

 

Flutter 레이아웃의

기본 중 기본이라고 할 수 있죠.

 

 

 

 

 

 

---

🧱 Row가 뭘까?

 

 

 

 

Row는

말 그대로 자식 위젯들을

가로 방향으로

쭉 나열해 주는 위젯입니다.

 

 

 

 

 

 

children 속성에

여러 위젯을 넣으면

 

 

 

왼쪽에서 오른쪽으로

차례차례 배치되죠.

 

 

 

 

 

 

하지만

여기서 주의할 점!

Row는 스크롤 기능이 없어서,

 

 

 

 

 

 

자식 위젯들의

총 너비가 화면보다 커지면

화면 밖으로 넘치면서

오류가 발생합니다.

 

 

 

 

 

이때 화면에

빨간 글씨와 함께

노란색과 검정색

경고 스트라이프가 나타나니,

 

 

 

이런 상황은

꼭 피해야 합니다.

 

 

 

 

 

 

 

이제 Row가

어떻게 동작하는지

좀 더 자세히 알아볼게요.

 

 

 

 

⚙️ Row는 어떻게 동작할까?

 

 

 

 

Row는

자식들을 수평으로

배치하는 역할을

합니다.

 

 

 

 

 

기본적으로는

왼쪽 정렬

(MainAxisAlignment.start)이고,

세로 방향으로는 중앙 정렬

(CrossAxisAlignment.center)이 기본값이에요.

 

 

 

 

 

 

동작 방식을 좀 더 자세히 보면:

• 먼저 자식 위젯들의 크기를 계산합니다.
• 남은 공간이 있다면, Expanded나 Flexible로 감싼 자식에게 그 공간을 나눠줍니다.
• 만약 자식이 너무 많거나 크기가 커서 공간이 부족하면, 앞서 말한 overflow 경고가 나타나죠.
• 그리고 Row 자체는 스크롤을 지원하지 않기 때문에, 많은 자식을 가로로 나열해야 할 때는 ListView 같은 스크롤 가능한 위젯을 써야 합니다.

 

 

이런 동작 방식을 이해하면, Row를 더 효과적으로 쓸 수 있어요.

 

다음으로는

Row가 시각적으로

어떻게 동작하는지,

 

 

 

 

 

즉,

배경색이나 테두리 같은 스타일을

어떻게 적용하는지

알아볼게요.

 

 

 

 

 

 

🎨 Row에 시각적 스타일을 주고 싶다면?

 

 

 

Row는

위치와 배치만 담당하는 위젯이라서,

배경색이나 테두리 같은

시각적 속성을

직접 줄 수 없습니다.

 

 

 

 

그래서 만약 Row에

배경색을 입히거나

테두리를 추가하고 싶다면,

 

 

 

 

Container나 SizedBox 같은

시각적 위젯으로

감싸야 해요.

 

 

 

 

예를 들어, 노란 배경색을 주고 싶다면 이렇게요:

Container(
  color: Colors.yellow,
  child: Row(
    children: [
      Icon(Icons.star),
      Text('Flutter'),
    ],
  ),
)

 

 

 

 

 

이렇게 감싸면

 

 

Row가

배경색을 가진 것처럼 보이면서,

동시에 수평 배치도

잘 유지됩니다.

 

 

 

 

이제 Row가

크기를 어떻게 계산하는지도 알아야,

 

 

 

 

레이아웃을 좀 더 정확하게

다룰 수 있겠죠?

 

 

 

 

 

---

📐 Row의 크기 계산 방식

 

 

 

 

Row, Column, Center 같은

레이아웃 전용 위젯은

스스로 크기를 정하지 않고,

 

 

 

 

 

부모가 주는 제약(constraints) 내에서

자식들의 크기에 따라

크기가 결정됩니다.

 

 

 

 

 

쉽게 말해:

• Row는 자체적으로 고정된 크기가 없어요.
• 부모가 주는 공간 안에서 자식 크기에 따라 크기를 결정합니다.
• 만약 자식이 하나도 없거나 크기가 0이면, Row도 작아져서 보이지 않을 수 있습니다.
• 기본 설정인 mainAxisSize: MainAxisSize.max는 가능한 최대 너비를 차지하려 하지만, 자식이 없으면 의미가 없겠죠.

 

 

 

 

 

이런 크기 계산 방식을 이해하면,

Row를 사용할 때

어디에 공간이 할당되는지

감이 잡힙니다.

 

 

 

 

 

 

 

다음으로는 Row 생성자와

주요 속성들을

살펴보면서,

 

 

 

 

어떻게 설정을 바꿀 수 있는지 알아볼게요.

 

 

 

 

 

 

---

🛠️ 생성자 및 주요 속성

 

 

Row를 만들 때

자주 쓰는 속성들은

다음과 같습니다:

 

 

 

 

 

 

 

 

속성	설명
children	수평으로 배치할 자식 위젯 리스트
mainAxisAlignment	가로 방향의 정렬 방식 (예: 시작, 끝, 가운데, 간격 조절 등)
crossAxisAlignment	세로 방향의 정렬 방식 (예: 가운데, 위, 아래, 기준선 등)
mainAxisSize	Row의 전체 가로 길이 설정 (최대 공간 차지 또는 자식 크기만큼)
textDirection	자식 위젯 배치 순서 (왼쪽에서 오른쪽, 또는 오른쪽에서 왼쪽)
verticalDirection	세로 방향 정렬 순서 (위에서 아래, 또는 아래에서 위)
textBaseline	기준선 정렬 시 사용할 기준선 지정

 

 

 

 

 

 

 

생성자 형태는

다음과 같습니다:

 

 

Row({
  Key? key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection? textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline? textBaseline,
  List<Widget> children = const <Widget>[],
})

 

 

 

 

이 속성들을 적절히 조합하면,

 

 

 

수평 배치의 정렬과

크기 조절을

자유롭게 할 수 있습니다.

 

 

 

 

 

이제 실제 예제를 통해

 

어떻게 쓰이는지 살펴볼까요?

 

 

 

 

 

 

---

🧪 Sample Code

 

 

예제 1: 기본 Row 사용하기

가장 기본적인 Row는

이렇게 생겼습니다.

 

 

 

 

 

아이콘과 텍스트가

왼쪽부터 차례대로 배치되죠.

Row(
  children: [
    Icon(Icons.star),
    Text('Flutter'),
  ],
)

---

예제 2: 정렬과 간격 조절

 

 

mainAxisAlignment를

spaceBetween으로 바꾸면,

 

 

 

 

자식 위젯들이

좌우 끝에 붙고

중간 공간이

균등하게 분배됩니다.

 

 

 

 

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

 

 

 

이렇게 하면

버튼이나 텍스트를

양 끝에 배치하고 싶을 때

유용합니다.

 

 

---

예제 3: Overflow 발생 주의하기

Row는 스크롤이 없기 때문에,

너무 긴 텍스트가 들어가면

화면을 벗어나면서

오류가 발생합니다.

 

 

 

 

 

 

이런 실수는 초보자들이

 

자주 하는 실수 중 하나입니다.

 

 

 

 

 

Row(
  children: [
    FlutterLogo(),
    Text('아주 긴 텍스트입니다. 여기에 계속해서 문장을 추가하면 overflow가 발생합니다.'),
    Icon(Icons.sentiment_very_satisfied),
  ],
)

 

 

 

 

 

 

이럴 때는

텍스트가 화면을

넘치지 않도록

조치가 필요합니다.

 

 

 

 

 

 

다음 예제에서

해결 방법을

보여줄게요.

 

 

 

 

 

 

 

---

예제 4: Expanded로 공간 분배하기

 

 

 

긴 텍스트를 Expanded로 감싸면,

 

 

 

남은 공간을 차지하면서

자동으로 줄바꿈이 됩니다.

 

 

 

 

 

이렇게 하면

overflow 걱정 없이

깔끔한 수평 배치를

할 수 있죠.

 

 

 

Row(
  children: [
    FlutterLogo(),
    Expanded(
      child: Text('긴 문장은 Expanded로 감싸면 자동으로 줄바꿈 처리됩니다.'),
    ),
    Icon(Icons.sentiment_very_satisfied),
  ],
)

 

 

 

 

 

 

Expanded는

Row 안에서

공간을 효율적으로 분배할 때

필수적인 도구입니다.

 

 

 

 

 

---

예제 5: 텍스트 방향 바꾸기

 

textDirection을

rtl(right-to-left)로 설정하면,

 

 

 

자식 위젯들이

오른쪽부터 왼쪽으로

배치됩니다.

 

 

 

 

 

아랍어나 히브리어 같은

RTL 언어를 지원할 때

유용합니다.

 

 

 

 

Row(
  textDirection: TextDirection.rtl,
  children: [
    Text('오른쪽부터'),
    Icon(Icons.arrow_back),
  ],
)

 

 

 

 

 

 

이렇게 하면

UI가 자연스럽게

오른쪽에서 왼쪽으로 읽히는

레이아웃이 됩니다.

 

 

 

 

 

---

마무리하며

Row는 Flutter에서 가장 기본적이면서도 자주 쓰이는 수평 배치 위젯입니다.

 

 

 

 

단순히 가로로 위젯을 나열하는 것 같지만,

 

 

 

 

정렬, 크기 분배, 방향 설정 등

다양한 기능을 잘 활용하면

훨씬 유연한 UI를 만들 수 있어요.

 

 

 

 

 

 

 

 

다음 글에서는 Container 위젯을 다루며,

 

 

 

 

배경색, 여백, 테두리 등

 

시각적 속성을

어떻게 구성할 수 있는지

살펴볼게요.

 

 

 

Flutter 레이아웃 마스터를 향해

 

함께 달려봅시다!