Flutter 레이아웃 시스템 비교: Column, Row, Flex, Stack

Flutter 레이아웃 시스템 비교: Column, Row, Flex, Stack

Flutter에서 화면 구성을 위해 다양한 레이아웃 위젯이 제공됩니다. 그 중에서도 가장 기본적이고 자주 사용되는 위젯이 Column, Row, Flex, Stack입니다. 이 글에서는 각 위젯의 특성과 차이점을 비교하고, 실제로 어떻게 사용해야 하는지 예제와 함께 설명합니다.

---

📌 1. Column 위젯

Column 위젯은 자식 위젯들을 **세로 방향(수직)**으로 배치하는 데 사용됩니다.

✅ 주요 특징

• 수직으로 위젯을 나열
• 화면을 초과하는 경우 SingleChildScrollView로 스크롤 구현 가능
• mainAxisAlignment, crossAxisAlignment로 정렬 조정

📊 기본 사용 예제

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Column 예제')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('첫 번째 아이템'),
            Text('두 번째 아이템'),
            Text('세 번째 아이템'),
          ],
        ),
      ),
    );
  }
}

📌 주요 속성

속성	설명
mainAxisAlignment	주 축(세로) 방향 정렬 (start, center 등)
crossAxisAlignment	반대 축(가로) 방향 정렬
mainAxisSize	위젯의 크기를 최소/최대로 설정

---

📌 2. Row 위젯

Row 위젯은 자식 위젯들을 **가로 방향(수평)**으로 배치합니다.

✅ 주요 특징

• 수평으로 위젯을 배치
• Expanded로 남은 공간을 채우기 가능
• Overflow 문제 발생 시 주의 필요

📊 기본 사용 예제

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const [
    Icon(Icons.home),
    Icon(Icons.star),
    Icon(Icons.settings),
  ],
)

📌 주요 속성

속성	설명
mainAxisAlignment	주 축(가로) 방향 정렬
crossAxisAlignment	반대 축(세로) 방향 정렬
mainAxisSize	위젯의 크기를 최소/최대로 설정

✅ Column vs Row 차이점

구분	Column	Row
방향	세로 (수직)	가로 (수평)
스크롤 처리	SingleChildScrollView 필요	SingleChildScrollView 필요
주 사용 사례	목록, 폼 입력 필드 배치	버튼 그룹, 아이콘 나열

---

📌 3. Flex 위젯

Flex는 Column과 Row의 상위 형태로, 축을 지정해 가변 레이아웃을 구현합니다.

✅ 주요 특징

• direction으로 방향을 지정 (Axis.vertical, Axis.horizontal)
• 복잡한 레이아웃을 더 유연하게 관리
• Expanded와 함께 사용해 비율 기반 레이아웃 구현 가능

📊 기본 사용 예제

Flex(
  direction: Axis.horizontal,
  children: const [
    Expanded(child: Text('1번')),
    Expanded(child: Text('2번')),
    Expanded(child: Text('3번')),
  ],
)

📌 주요 속성

속성	설명
direction	레이아웃 방향 지정 (Axis.horizontal, vertical)
mainAxisAlignment	주 축 방향 정렬
crossAxisAlignment	반대 축 방향 정렬

✅ Column, Row vs Flex 차이점

 

구분	Column/Row	Flex
방향 고정	Column: 수직, Row: 수평	Axis로 유연하게 변경 가능
사용 편의성	더 간단한 구조	더 복잡한 레이아웃에 유리

---

📌 4. Stack 위젯

Stack은 위젯들을 겹쳐서 배치할 때 사용합니다.

✅ 주요 특징

• 위젯을 겹쳐서 배치 가능
• Positioned로 개별 위치 조정 가능
• 여러 위젯을 자유롭게 배치할 때 유용

📊 기본 사용 예제

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 50,
      left: 50,
      child: Text('겹쳐진 텍스트'),
    ),
  ],
)

📌 주요 속성

속성	설명
alignment	자식 위젯들의 기본 정렬 (center, topRight 등)
fit	자식 위젯의 크기 조절 (loose, expand)

✅ Stack vs 다른 위젯 차이점

구분	Stack	Column/Row/Flex
배치 방식	위젯을 겹쳐서 배치	위젯을 나란히 배치
위치 제어	Positioned로 자유롭게 조절	축 기준으로 정렬
주요 사용처	배경 위에 요소 배치, 복합 인터페이스	단순 목록, 버튼 배열

---

📌 5. 결론: 언제 무엇을 사용할까?

상황	추천 위젯
수직 배치가 필요한 경우	Column
수평 배치가 필요한 경우	Row
유연한 레이아웃 구현 시	Flex
겹치는 배치가 필요한 경우	Stack

 

Flutter의 다양한 레이아웃 위젯을 이해하고 활용하면 더 효율적이고 유연한 UI를 구현할 수 있습니다. 각 위젯의 특성을 파악해 프로젝트의 요구사항에 맞는 위젯을 선택하세요!