TIssue | Flutter | Text 위젯에서 textAlign 속성지정으로 가운데 정렬이 되지 않는 이유

Text 위젯에서 textAlign을 center 속성으로 지정해도 가운데 정렬이 되지 않는 이유와 해결책에 대한 글이다.

Flutter - Text 위젯에서 textAlign 속성 지정으로 가운데 정렬이 되지 않는 이슈

Flutter - Text 위젯 textAlign 속성 이용해 가운데 정렬하기

현상

Text 위젯 사용법을 다양하게 익혀보던 중, textAlign 속성으로 지정할 때 가운데 정렬이 되지 않는 이슈가 있었다.

body: Column(
  children: [  
    Text(
      'center aligned text',
      textAlign: TextAlign.center,
    )
  ],
),

가운데 정렬되지 않은 텍스트

원인

Text가 html의 span과 같이 문자열이 차지하는 너비 영역만을 차지하기 때문이다. 만약 작성한 텍스트가 길어서 화면 가로 너비를 모두 차지했다면 문제없이 가운데 정렬이 됐을 것이다.

가운데 정렬된 긴 텍스트

Text 위젯에 대해서

해결책을 살펴보기 전에 Text 위젯의 너비 특성에 대해 잘알아 두는 것이 좋다.

기본 너비

단독으로 존재하는 Text 위젯은 text가 차지하는 공간만큼의 너비값을 갖는다. 따라서 너비값을 갖는 부모 위젯이 없고, text의 길이가 디스플레이 너비보다 짧다면 가운데 정렬이 적용이 안되는 것으로 보인다.

부모 위젯의 영향

하지만 Text를 갖고 있는 부모 위젯에 너비 속성이 적용되어 있다면, Text 위젯의 너비는 부모 위젯의 너비까지 확장된다.

• 너비 조정

만약 너비를 직접 조정하고 싶을 경우에는 Container나 SizedBox 등으로 감싼 뒤 너비를 지정하면 Text 위젯의 너비값을 명시적으로 제어할 수 있다/

해결책

다양한 방법이 있지만, 대표적인 방법 2가지와 이번에 적용할 방법 1가지를 살펴보려고 한다.

1. Text 위젯을 Center 위젯으로 감싸기

Center 위젯은 자신의 자식 위젯을 자신의 부모 위젯의 크기를 기준으로 중앙에 배치시킨다. 방향은 부모 위젯에 지정된 방향에 기초하지만 기본적으로는 가로방향이다. 현재 상황은 이 방법으로 해결시, 부모 위젯의 크기가 디스플레이 너비여야 원하는 결과를 얻을 수 있다.

Center(
  child: Text(
    'center aligned text',
    textAlign: TextAlign.center,
  ),
)

 

2. Text 위젯을 Contaner로 감싼뒤 Container의 너비를 지정하기

Text위젯을 Container 위젯으로 감싸고, Container 위젯의 너비를 infinity 크기로 설정하면 부모 위젯의 너비만큼 공간을 차지하게 된다. 이 때 Text 위젯의 속성을 TextAlign.center로 설정하면 가운데 정렬이 가능하다. 

Container(
  width: double.infinity,
  child: Text(
    'center aligned text',
    textAlign: TextAlign.center,
  ),
)

3. Text가 존재하는 Column의 crossAxisAlignment 속성을 사용하기

현재 작성중인 코드에서는 Text위젯이 Column내에 위치한다. Column은 가로 너비를 지정할 수 없는 위젯이다. 이런 경우에는 Column의 방향의 수직인 가로방향을 제어할 수 있는 crossAxisAlignment 속성을 사용하고, CrossAxisAlignment.strech를 사용하면 Container에서 너비를 infinity로 설정한것과 같이 가로 공간을 가득 채우는 것을 가능하도록 설정할 수 있다. 이렇게 한 다음 Text 위젯에서 TextAlign.center 속성을 설정하면 Text가 가운데 정렬된다.

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text(
      'center aligned text',
      textAlign: TextAlign.center,
    ),
  ],
)

가운데 정렬된 텍스트