How to horizontally center a Text in flutter?

I’m 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.

[![enter image description here][1]][1]

How can I fix this?


[1]:

try this

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,
),
],
),
),
);
}
}

If I understand, you just want to center horizontally the title, not the other elements that may come after I suppose.

Take a look at the code below:

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueAccent,
title: Text("DEMO"),
),
body: Container(
color: Colors.black,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[_buildTitle()],
),
Row(
children: <Widget>[
// add other elements that you don't to center horizontally
Text(
"other elements here",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
],
),
],
)));
}

Widget _buildTitle() {
return Container(
margin: EdgeInsets.only(top: 100),
child: Text(
"something.xyz",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
);
}
}

The result that gives: [here][1]


[1]:

I added my own widget for this use case which is much shorter than the row solution:

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]);
}

the result is this:

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

more simple way:

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

You can also solve it with a `Container` and `TextAlign`:
```dart
Container(
width: double.infinity,
child: Text(
'something.xyz',
textAlign: TextAlign.center,
),
)
```

In this case, the container takes up the entire width with `double.infinity`. The text adapts to the container and can be moved to the middle of the screen with `TextAlign.center`.

set

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

in program

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,
),
),
);

```
Container(
width: double.infinity,
child: const Text(
"Hello World!",
textAlign: TextAlign.center,
),
);
```

Flutter now recommends `SizedBox` for white space

SizedBox(
width: double.infinity,
child: Text('Hello World',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.White,
fontSize: 16.0,
fontWeight: FontWeight.normal))),