Posts: 0
Threads: 0
Joined: Dec 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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]:
|
Posts: 0
Threads: 0
Joined: Apr 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
],
),
),
);
}
}
|
Posts: 1
Threads: 0
Joined: Oct 2017
Reputation:
0
Level: 1 []
Total Points: 0
Rank 0 / 1
99% to upload Level
Activity 0 / 1
99% to upload your Rank
Experience 1
99% to upload Experience
Points: 50
|
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]:
|
Posts: 0
Threads: 0
Joined: Dec 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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'))
|
Posts: 0
Threads: 0
Joined: Oct 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
more simple way:
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Sunday', style: TextStyle(fontSize: 20),),
],
),
), //Center
|
Posts: 0
Threads: 0
Joined: Jun 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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`.
|
Posts: 0
Threads: 0
Joined: May 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
set
child: Center(
child: Text(
"Hello World",
textAlign: TextAlign.center,
),
),
in program
|
Posts: 0
Threads: 0
Joined: Feb 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
),
),
);
|
Posts: 0
Threads: 0
Joined: Jun 2021
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
```
Container(
width: double.infinity,
child: const Text(
"Hello World!",
textAlign: TextAlign.center,
),
);
```
|
Posts: 0
Threads: 0
Joined: Jan 2020
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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))),
|
|