+- 0Day Forums (https://zeroday.vip)
+-- Forum: Coding (https://zeroday.vip/Forum-Coding)
+--- Forum: Flutter & Dart (https://zeroday.vip/Forum-Flutter-Dart)
+--- Thread: How to horizontally center a Text in flutter? (/Thread-How-to-horizontally-center-a-Text-in-flutter)
How to horizontally center a Text in flutter? - Propyralis629 - 07-21-2023
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]:
RE: How to horizontally center a Text in flutter? - sledding570612 - 07-21-2023
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,
),
],
),
),
);
}
}
RE: How to horizontally center a Text in flutter? - managesby - 07-21-2023
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]:
RE: How to horizontally center a Text in flutter? - Probeatricefmxvm - 07-21-2023
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'))
RE: How to horizontally center a Text in flutter? - unhackneyed356041 - 07-21-2023
more simple way:
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Sunday', style: TextStyle(fontSize: 20),),
],
),
), //Center
RE: How to horizontally center a Text in flutter? - swallow420 - 07-21-2023
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`.
RE: How to horizontally center a Text in flutter? - tintoretto575 - 07-21-2023
set
child: Center(
child: Text(
"Hello World",
textAlign: TextAlign.center,
),
),
in program
RE: How to horizontally center a Text in flutter? - cowen781 - 07-21-2023
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,
),
),
);
RE: How to horizontally center a Text in flutter? - tzungebrkqrzfte - 07-21-2023
```
Container(
width: double.infinity,
child: const Text(
"Hello World!",
textAlign: TextAlign.center,
),
);
```
RE: How to horizontally center a Text in flutter? - Sirunretaliated524 - 07-21-2023
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))),