플러터(flutter) Center 위젯 사용법: 화면 중앙 정렬 가장 쉬운 방법

플러터 Center 위젯은 자식 위젯(child)을 부모 영역의 정중앙(가로/세로)에 배치해주는 가장 기본적인 정렬 위젯입니다. 화면 중앙에 텍스트/버튼/아이콘을 놓고 싶을 때 제일 먼저 쓰는 편입니다.

 

---

 

1) 기본 사용법

Center(
  child: Text('가운데 정렬'),
)

 

• Center는 딱 한 개의 child만 받습니다.
• 부모가 제공하는 공간 안에서 가로/세로 중앙으로 배치합니다.

 

예: Scaffold의 body에 두면 화면 중앙에 위치합니다.

Scaffold(
  appBar: AppBar(title: const Text('Center 예제')),
  body: Center(
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('중앙 버튼'),
    ),
  ),
)

 

---

2) Center의 동작 포인트: “부모가 준 공간” 기준

Center가 “어디를 기준으로 중앙”을 잡는지 헷갈릴 때가 있는데, 기준은 항상 부모가 Center에게 준 영역입니다.

• Scaffold.body 안의 Center → 거의 화면 전체를 받으니 화면 중앙
• Container(height: 200) 안의 Center → 그 200 높이 영역의 중앙
• Row 안의 Center → Row가 child에게 주는 제약(constraints)에 따라 중앙이 달라질 수 있음

 

---

 

3) widthFactor, heightFactor (크기 줄이기/감싸기)

Center는 기본적으로 “가능한 큰 공간”을 차지하려는 경향이 있습니다(부모 제약 내에서).

그런데 widthFactor, heightFactor를 주면 자식 크기를 기준으로 Center 자체 크기를 줄일 수 있습니다.

Center(
  widthFactor: 2.0,
  heightFactor: 3.0,
  child: const FlutterLogo(size: 40),
)

 

• Center의 너비 = 자식 너비 × widthFactor
• Center의 높이 = 자식 높이 × heightFactor

실무에서는 “정중앙 정렬” 목적만이면 잘 안 쓰고, 레이아웃 미세 조정이나 측정/데모에서 가끔 씁니다.

 

---

4) Align / Row/Column과의 차이 (언제 Center를 쓰나)

 

Center vs Align

• Center는 사실상 Align(alignment: Alignment.center)의 간단 버전입니다.
• 위치를 바꿔야 하면 Align이 더 적합합니다.

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

 

Row/Column에서의 중앙 정렬

Row/Column에서 중앙 정렬은 보통 아래처럼 합니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: const [Text('가운데')],
)

 

• Center는 “단일 child를 중앙”에 놓을 때 가장 직관적
• 여러 child를 축 기준으로 정렬하려면 Row/Column의 정렬 옵션이 더 자연스럽습니다.

 

---

 

5) 자주 하는 실수/주의점

1. 부모가 크기를 거의 안 주는 경우이럴 땐 Expanded/Spacer/MainAxisAlignment 등을 같이 봐야 합니다.
2. 예: Row 안에서 child가 최소 폭만 받는 상황이면, Center가 기대처럼 “화면 중앙”이 아니라 “Row가 준 작은 영역의 중앙”이 됩니다.
3. Stack에서 중앙 배치
4. Stack에서는 보통 Center보다 Alignment나 Positioned.fill + Align을 더 많이 씁니다. 그래도 Center도 잘 됩니다.

Stack(
  children: [
    Positioned.fill(child: Container(color: Colors.black12)),
    Center(child: Text('Stack 중앙')),
  ],
)