Flutter에서 텍스트를 세로 및 가로 중앙에 어떻게 배치합니까?

117

Flutter에서 Text 위젯의 내용을 세로 및 가로로 가운데에 배치하는 방법을 알고 싶습니다. Center(child: Text("test"))콘텐츠 자체가 아닌 사용하여 위젯 자체를 중앙에 배치하는 방법 만 알고 있습니다. 기본적으로 왼쪽에 정렬됩니다. Android에서는이를 달성하는 TextView의 속성을 gravity.

내가 원하는 것의 예 :

— Jeroen-Meijer
소스

266

텍스트 정렬 중심 속성 설정 만 가로 정렬입니다.

아래 코드를 사용하여 텍스트를 세로 및 가로 가운데로 설정했습니다.

암호:

      child: Center(
        child: Text(
          "Hello World",
          textAlign: TextAlign.center,
        ),
      ),

— 셸리 프리 차드
소스

1

@Shelly 어떤 경우에는 작동하지 않습니다. heightFactor : 속성도 추가해야합니다. 예 : Center (heightFactor : 2.3, child : Text ( 'SELFIE', textAlign : TextAlign.center, 스타일 : TextStyle (fontSize : 18.0, color : Colors.black, fontWeight : FontWeight.bold,)),),

— Sanjeev Sangral

나는 살펴보고 동의합니다. 수평 및 수직 중앙에 있기 때문에 정답으로 변경되었습니다.

— jeroen-meijer

85

생성자의 TextAlign속성을 사용할 수 있습니다 Text.

Text("text", textAlign: TextAlign.center,)

— 나무
소스

36

왜 이것이 답으로 표시되었는지 잘 모르겠습니다. 이것은 텍스트를 가로로 가운데 만 배치하기 때문입니다. 그러나 질문은 가로 및 세로를 요구합니다 .

— Herohtar

3

예, 제거해야합니다. 질문에 대한 답변이 아닙니다.

— Hasen

51

더 유연한 옵션은 다음 Text()과 Align()같이 감싸는 것 입니다 .

Align(
  alignment: Alignment.center, // Align however you like (i.e .centerRight, centerLeft)
  child: Text("My Text"),
),

사용 Center()은 TextAlign텍스트 위젯에서 완전히 무시하는 것 같습니다 . 정렬되지 TextAlign.left않거나 TextAlign.right시도하면 중앙에 유지됩니다.

— 마이크
소스

1

훨씬 더 좋은 대답은 이것입니다.

— 니콜라 Jovic

이 질문은 텍스트를 가로 및 세로로 가운데에 배치하는 방법에 대한 질문이므로 표시된 답변이어야합니다. 감사합니다!

— Ali Gürelli

이것은 대답 녀석입니다. 왜 내 텍스트가 더 큰 글꼴 크기로 정렬되지 않았는지 궁금합니다. 그 중심이 텍스트로 이상하고 중단 점이 텍스트 크기를 무시할 것입니다. 정렬 사랑 ...이 문제를 가지고하지 않는 것 같다 U <3

— ValdaXD

8

                       child: Align(
                          alignment: Alignment.center,
                          child: Text(
                            'Text here',
                            textAlign: TextAlign.center,                          
                          ),
                        ),

이것은 나에게 최고의 결과를 가져 왔습니다.

— 폴 키 타타
소스

3

Center of SizedBox 내의 텍스트 요소가 샘플 코드 아래에서 훨씬 더 나은 방식으로 작동합니다.

Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: Colors.green,
      splashColor: Colors.greenAccent,
      shape: new CircleBorder(),
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SizedBox(
              width: 100.0,
              height: 100.0,
              child: Center(
                child: Text(
                widget.buttonText,
                maxLines: 1,
                style: TextStyle(color: Colors.white)
              ),
              )
          )]
        ),
    ),
  onPressed: widget.onPressed
);
}

코딩 즐기기 👨‍💻

— Ramesh RC
소스

2

중앙에 텍스트 넣기 :

Container(
      height: 45,
      color: Colors.black,
      child: Center(
        child: Text(
            'test',
            style: TextStyle(color: Colors.white),
        ),
      ),
    );

— Minghang
소스

2

IntelliJ IDE 사용자 인 경우 바로 가기 키 Alt+Enter를 사용한 다음 선택 Wrap with Center하여 추가 할 수 있습니다.textAlign: TextAlign.center

— 레이 코더
소스

0

개요 : Flex 위젯을 사용하여 가로축을 따라 MainAxisAlignment.center를 사용하여 내 페이지의 텍스트를 중앙에 배치했습니다. 컨테이너 패딩을 사용하여 텍스트 주위에 여백을 만듭니다.

  Flex(
            direction: Axis.horizontal,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Container(
                    padding: EdgeInsets.all(20),
                    child:
                        Text("No Records found", style: NoRecordFoundStyle))
  ])

— 황금 사자
소스

0

2 컨테이너에 동일한 너비와 높이를 제공하고 싶을 수도 있습니다.

Container(
            width: size.width * 0.30, height: size.height * 0.4,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6)
            ),
            child: Center(
              child: Text(categoryName, textAlign: TextAlign.center, style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 17,
                color: Colors.white,
              ),),
            ),

— 소로스 거짓말
소스