Flutter 위젯 정렬 완벽 가이드 | Row, Column, MainAxisAlignment, CrossAxisAlignment 이해하기

서론

Flutter 위젯 정렬,

플러터(Flutter)로 UI를 만들다 보면 가장 처음 부딪히는 벽이 바로 **정렬(Alignment)**입니다.
Row, Column, Stack, Align 등 다양한 위젯에서 정렬 방식을 이해하면 더 깔끔하고 유연한 UI를 만들 수 있습니다.
이번 글에서는 플러터의 주요 정렬 속성과 실전 예시를 통해 정렬 개념을 완벽하게 정리해봅니다.

1. Row와 Column의 기본 구조

Row는 가로 방향, Column은 세로 방향으로 위젯을 배치합니다.

Row(
  children: [
    Text('왼쪽'),
    Text('가운데'),
    Text('오른쪽'),
  ],
)

Column(
  children: [
    Text('위'),
    Text('가운데'),
    Text('아래'),
  ],
)

핵심: Row는 MainAxis = 가로축, Column은 MainAxis = 세로축입니다.

2. MainAxisAlignment (주축 정렬)

주축 방향(가로 혹은 세로)의 정렬을 담당합니다.

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

옵션	설명
`start`	시작 지점 정렬 (기본값)
`center`	중앙 정렬
`end`	끝 지점 정렬
`spaceBetween`	요소 사이에 균등 간격
`spaceAround`	요소 양쪽 여백 포함 균등 간격
`spaceEvenly`	전체 구간을 균등 분할

3. CrossAxisAlignment (보조축 정렬)

보조축(세로축 혹은 가로축)의 정렬을 설정합니다.

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Top'),
    Text('Middle'),
    Text('Bottom'),
  ],
)

옵션	설명
`start`	위쪽 혹은 왼쪽 정렬
`center`	가운데 정렬
`end`	아래쪽 혹은 오른쪽 정렬
`stretch`	가능한 공간까지 확장

4. Align 위젯으로 개별 위젯 정렬하기

Row나 Column 전체가 아닌 특정 위젯만 정렬하고 싶다면 Align 위젯을 사용합니다.

Align(
  alignment: Alignment.bottomRight,
  child: Text('오른쪽 아래'),
)

Alignment에는 다음과 같은 옵션이 있습니다:

Alignment.topLeft
Alignment.center
Alignment.bottomRight
Alignment(x, y) 형태로 세밀한 조정도 가능 (x=-1.0~1.0, y=-1.0~1.0)

5. Stack과 Positioned로 절대 위치 정렬

Stack은 위젯을 서로 겹쳐서 배치하며, Positioned를 사용해 정밀 제어가 가능합니다.

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 10,
      right: 10,
      child: Text('상단 오른쪽'),
    ),
  ],
)

Tip: Stack은 Z축(겹침)을 표현할 때 유용하지만, 오버플로우를 주의해야 합니다.

6. 실전 예시 – 로그인 화면 정렬

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('로그인', textAlign: TextAlign.center),
    SizedBox(height: 20),
    TextField(decoration: InputDecoration(labelText: '아이디')),
    TextField(decoration: InputDecoration(labelText: '비밀번호')),
    ElevatedButton(onPressed: () {}, child: Text('로그인')),
  ],
)

로그인 폼을 화면 중앙에 정렬하고, 버튼은 가로폭 전체를 채워 사용자 경험(UX)을 개선했습니다.

결론

플러터의 정렬은 단순히 위젯을 ‘배치’하는 것이 아니라, UI의 완성도와 반응형 디자인의 핵심 요소입니다.
Row와 Column의 개념을 이해하고 MainAxisAlignment, CrossAxisAlignment, Align, Stack을 조합하면
어떤 화면도 정교하게 컨트롤할 수 있습니다.