Flutter에서 텍스트를 중앙에 배치하는 6가지 방법

원문

플러터의 텍스트 위젯은 다양한 기능을 가진데다

커스터마이징을 하기에도 쉬운 강력한 도구다

 

사용자가 즐겁고 편하게 화면의 텍스트를 읽게 하는 가장 간단한 방법은

텍스트를 중앙에 위치시키는 것이다

버튼이나 사진같은 다른 위젯과 함께 텍스트를 정렬할 때도 좋다

 

다음은 텍스트를, 정확히는 위젯을 중앙 정렬하는 6가지 방법이다

 

 

1.Center

center 위젯의 child는 수직 및 수평 중앙정렬된다

Center(
    child: Text("Center"),
)

 

2.Align

child를 특정 위치에 두고 싶을 때 사용하는 위젯

Alignment.center를 이용해서 Align의 child를 중앙 정렬시킨다

Align (
    alignment: Alignment.center,
  child: Text("Center"),
)

 

3.Row, Column + mainAxisAlignment, crossAxisAlignment

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text("Center"),
  ],
)

 

4.Flex + mainAxisAlignment, crossAxisAlignment

Flex(
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text("Center"),
  ],
)

 

5.Expanded + Flex

Flex(
    direction: Axis.horizontal,
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Text("Center"),
      ),
    ],
)

 

6.Container + alignment

Container(
  alignment: Alignment.center,
  child: Text("Center"),
)