[Flutter] 화면 중앙 정렬 SizedBox vs Column vs Center

Flutter에서 하위 요소를 화면 중앙에 배치하는 방법에는 3가지 방법이 있다.

SizedBox-Column 조합, Column 단독 사용, Center 위젯 이 3가지 방법의 차이에 대해서 살펴봤다.

 

1. SizedBox - Column 조합

SizedBox 위젯에서 너비를 double.infinity로 해서 가로를 최대로(화면 너비로) 늘린 후 자식 위젯을 Column으로 둬서 가운데 정렬 시키는 방법이다.

Column은 기본적으로 자식들을 가로 상 가운데 정렬을 하기 때문에 SizedBox가 화면의 전체 너비를 차지하게 하면 자식 요소가 화면의 가로 상 가운데로 가게 하는 것이다. 그리고 MainAxisAlignment.center로 두어 세로 상으로도 가운데에 두게 되면 결과적으로 자식 요소가 화면 정중앙에 위치하게 되는 것이다.

SizedBox-Column으로 자식 위젯을 화면 정중앙에 두기

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: Colors.blue,
            child: Text('Hello'),
          ),
        ],
      ),
    );
  }
}

 

2. Column 단독 사용

SizedBox를 쓰지 않고, Column을 단독으로 쓰면서 mainAxisAlignment와 crossAxisAlignment 요소를 통해 정의하는 방법이다.

우선 1번에서 SizedBox를 쓸 때와 동일하게 Column 위젯의 mainAxisAlignment 속성을 MainAxisAlignment.center로 두어 세로 상 가운데에 둔다. 그리고 crossAxisAlignment 속성을 CrossAxisAlignment.stretch로 두어 자식 위젯을 부모 위젯의 너비만큼 가로로 늘리게 한다. 그러면 아래 왼쪽 이미지에서처럼 파란색 영역이 화면 너비만큼을 차지하고 있는 것을 확인할 수 있다. 하지만 Hello 글자는 왼쪽에 위치하게 되는데, 이건 Hello를 감싸고 있는 Text 위젯이 다시 가로 상 가운데로 오게 하면 된다. 이때는 Container 위젯의 alignment 속성을 Alignment.center로 두거나 Text 위젯의 textAlign 속성을 TextAlign.center로 두면 된다.

1번에서 SizedBox-Column 조합을 썼을 때와 차이는 자식 위젯의 크기(파란색 영역의 크기)가 유지되느냐 그렇지 않느냐의 차이이다.

Hello가 왼쪽에 위치 / Hello가 중앙에 위치

// 텍스트를 가로 상 중앙으로 두는 방법에는 아래 두 버전이 가능하다.
// 1. alignment: Alignment.center
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('Hello'),
        ),
      ],
    );
  }
}

// 2. textAlign: TextAlign.center
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          color: Colors.blue,
          child: Text(
            'Hello',
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

 

3. Center 위젯

마지막은 가장 간단하게 Center 위젯을 쓰는 방법이다. 1번 방법과 동일하게 자식 위젯의 크기를 유지하면서 중앙에 위치하게 한다.

그럼 1번 방법과 3번 방법의 차이는 무엇일까?

SizedBox는 위젯의 크기를 지정할 수 있는데, Center는 그렇지 못하고 단순히 자식 위젯을 중앙에 배치하게만 한다는 것이다. 추가적인 크기 지정이 필요 없고 중앙에 위치시키기만 하면 된다면 Center 위젯을 사용하면 되고, 지정된 크기 안에서 중앙에 정렬시키고 싶으면  1번 방식인 SizedBox-Column 조합을 사용하면 된다. 지정된 크기 안에서 중앙 정렬 시킨 것은 아래 3-1에서 확인하면 된다.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Center(
        child: Container(
          color: Colors.blue,
          child: Text('Hello'),
        ),
      ),
    );
  }
}

 

3-1. SizedBox에서 크기를 지정한 후에 중앙 정렬 시킨 것