Flutter Column 위젯 완벽 가이드

Flutter에서 UI를 구성할 때 가장 자주 사용하는 위젯 중 하나가 바로 Column입니다. 이 글에서는 Column 위젯의 기본 개념부터 실전 활용까지 자세히 알아보겠습니다.

Column이란?

Column은 자식 위젯들을 세로(수직) 방향으로 배치하는 레이아웃 위젯입니다. 여러 위젯을 위에서 아래로 쌓아서 표시할 때 사용합니다.

기본 사용법

Column(
  children: [
    Text('첫 번째 아이템'),
    Text('두 번째 아이템'),
    Text('세 번째 아이템'),
  ],
)

주요 속성

1. mainAxisAlignment

세로축(주축)에서 자식 위젯들을 어떻게 배치할지 결정합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('중앙 정렬'),
    Text('예제'),
  ],
)

사용 가능한 값들은 다음과 같습니다.

• start: 위쪽에 배치 (기본값)
• end: 아래쪽에 배치
• center: 중앙에 배치
• spaceBetween: 양 끝에 배치하고 사이 공간을 균등 분배
• spaceAround: 각 위젯 주변에 동일한 공간 배치
• spaceEvenly: 모든 공간을 균등하게 분배

2. crossAxisAlignment

가로축(교차축)에서 자식 위젯들을 어떻게 배치할지 결정합니다.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('왼쪽 정렬'),
    Text('텍스트'),
  ],
)

사용 가능한 값들입니다.

• start: 왼쪽 정렬
• end: 오른쪽 정렬
• center: 가운데 정렬 (기본값)
• stretch: 가로 전체를 채움
• baseline: 텍스트 기준선에 맞춤

3. mainAxisSize

Column이 세로 방향으로 차지할 공간의 크기를 결정합니다.

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('최소 크기'),
  ],
)

• max: 사용 가능한 최대 높이를 차지 (기본값)
• min: 자식 위젯들을 담을 수 있는 최소 높이만 차지

실전 예제

프로필 카드 만들기

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    CircleAvatar(
      radius: 50,
      backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
    ),
    SizedBox(height: 16),
    Text(
      '홍길동',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
    SizedBox(height: 8),
    Text(
      'Flutter 개발자',
      style: TextStyle(
        fontSize: 16,
        color: Colors.grey,
      ),
    ),
    SizedBox(height: 24),
    ElevatedButton(
      onPressed: () {},
      child: Text('팔로우'),
    ),
  ],
)

폼 레이아웃

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    TextField(
      decoration: InputDecoration(
        labelText: '이메일',
        border: OutlineInputBorder(),
      ),
    ),
    SizedBox(height: 16),
    TextField(
      decoration: InputDecoration(
        labelText: '비밀번호',
        border: OutlineInputBorder(),
      ),
      obscureText: true,
    ),
    SizedBox(height: 24),
    ElevatedButton(
      onPressed: () {},
      child: Text('로그인'),
    ),
  ],
)

주의사항

1. 스크롤 오버플로

Column의 자식 위젯들이 화면을 넘어가면 오버플로 에러가 발생합니다. 이런 경우 SingleChildScrollView로 감싸주세요.

SingleChildScrollView(
  child: Column(
    children: [
      // 많은 위젯들...
    ],
  ),
)

2. Expanded와 Flexible 활용

남은 공간을 채우거나 비율을 조절하려면 Expanded나 Flexible을 사용합니다.

Column(
  children: [
    Text('고정 헤더'),
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Text('남은 공간을 모두 차지'),
      ),
    ),
    Text('고정 푸터'),
  ],
)

Row와의 차이

• Column: 세로(수직) 방향 배치
• Row: 가로(수평) 방향 배치

두 위젯은 속성이 동일하지만 배치 방향만 다릅니다.

마무리

Column은 Flutter UI 개발의 기본이 되는 핵심 위젯입니다. mainAxisAlignment와 crossAxisAlignment를 잘 활용하면 다양한 레이아웃을 쉽게 구현할 수 있습니다. 실제 프로젝트에서 충분히 연습해보시기 바랍니다!