How to horizontally center a Text in flutter?

Question

I am new to Flutter and trying to horizontally center a text. Please check the below code.

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        color: Colors.black,
        child: Row(
          children: <Widget>[
            Column(
              children: <Widget>[_buildTitle()],
            ),
          ],
        ));
  }

  Widget _buildTitle() {
    return 
    Center(child: Container(
      margin: EdgeInsets.only(top: 100),
      child: Column(

        children: <Widget>[
          Text(
            "something.xyz",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25,),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    ),);

  }
}

This did not center horizontally, instead gave the following output. The margins etc is fine.

How can I fix this?

Answer 1

您也可以使用Containerand解决它TextAlign：

Container(
   width: double.infinity,
   child: Text(
      'something.xyz',
      textAlign: TextAlign.center,
   ),
)

在这种情况下，容器占据了整个宽度double.infinity。文本适应容器，可以用 移动到屏幕中间TextAlign.center。

Answer 2

放

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

在节目中

Answer 3

更简单的方法：

child: Center(
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Text('Sunday', style: TextStyle(fontSize: 20),),
                 ],
               ),
             ), //Center

Answer 4

我为这个用例添加了我自己的小部件，它比行解决方案短得多：

import 'package:flutter/material.dart';

class CenterHorizontal extends StatelessWidget {   

    CenterHorizontal(this.child);   
    final Widget child;

    @override   
   Widget build(BuildContext context) => 
        Row(mainAxisAlignment: MainAxisAlignment.center,children: [child]); 
}

结果是这样的：

CenterHorizontal(Text('this is horizontal centered'))

Answer 5

尝试这个

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: LoginPage()));

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
          color: Colors.black,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[_buildTitle()],
              ),
            ],
          )),
    );
  }

  Widget _buildTitle() {
    return Center(
      child: Container(
        margin: EdgeInsets.only(top: 100),
        child: Column(
          children: <Widget>[
            Text(
              "something.xyz",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
              // textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 6

  Widget textSection = Container(
      child: Text(
      'This can be several lines centered in the child of a container Widget.',
      textAlign: TextAlign.center,
      style: TextStyle(
      fontSize: 15.0,
      color: Colors.white,
    ),
  ),
);