How to horizontally center a Text in flutter? - dart

Question

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.
How can I fix this?

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

Answer 2

You can also solve it with a Container and TextAlign:
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.

Answer 3

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

Answer 4

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

Answer 5

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'))

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

Answer 7

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

Answer 8

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

Answer 9

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