Under which circumstances textAlign property works in Flutter?
Solution 1:
DefaultTextStyle
is unrelated to the problem. Removing it simply uses the default style, which is far bigger than the one you used so it hides the problem.
textAlign
aligns the text in the space occupied by Text
when that occupied space is bigger than the actual content.
The thing is, inside a Column
, your Text
takes the bare minimum space. It is then the Column
that aligns its children using crossAxisAlignment
which defaults to center
.
An easy way to catch such behavior is by wrapping your texts like this :
Container(
color: Colors.red,
child: Text(...)
)
Which using the code you provided, render the following :
The problem suddenly becomes obvious: Text
don't take the whole Column
width.
You now have a few solutions.
You can wrap your Text
into an Align
to mimic textAlign
behavior
Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
),
),
),
],
)
Which will render the following :
or you can force your Text
to fill the Column
width.
Either by specifying crossAxisAlignment: CrossAxisAlignment.stretch
on Column
, or by using SizedBox
with an infinite width
.
Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
color: Colors.red,
child: Text(
"Should be left",
textAlign: TextAlign.left,
),
),
),
],
),
which renders the following:
In that example, it is TextAlign
that placed the text to the left.
Solution 2:
Specify crossAxisAlignment: CrossAxisAlignment.start
in your column
Solution 3:
textAlign
property only works when there is a more space left for the Text
's content. Below are 2 examples which shows when textAlign has impact and when not.
No impact
For instance, in this example, it won't have any impact because there is no extra space for the content of the Text
.
Text(
"Hello",
textAlign: TextAlign.end, // no impact
),
Has impact
If you wrap it in a Container
and provide extra width
such that it has more extra space.
Container(
width: 200,
color: Colors.orange,
child: Text(
"Hello",
textAlign: TextAlign.end, // has impact
),
)
Solution 4:
In Colum widget Text alignment will be centred automatically, so use crossAxisAlignment: CrossAxisAlignment.start
to align start.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(""),
Text(""),
]);
Solution 5:
Set alignment: Alignment.centerRight
in Container:
Container(
alignment: Alignment.centerRight,
child:Text(
"Hello",
),
)