Under which circumstances textAlign property works in Flutter

Question

In the code below  textAlign property doesn t work  If you remove DefaultTextStyle wrapper which is several levels above  textAlign starts to work   Why and how to ensure it is always working   import  package flutter material dart    void main     gt  runApp new MyApp      class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return new MaterialApp        title   Flutter Demo         theme  new ThemeData          primarySwatch  Colors blue                 home  new DefaultTextStyle style  new TextStyle fontSize  10 0   child  new Column children   lt Widget gt           new Text  Should be left   textAlign  TextAlign left            new Text  Should be right   textAlign  TextAlign right                               Both approaches  suggested by Remi apparently don t work  in the wild   Here is an example I nested both inside rows and columns  First approach doesn t do align and second approach makes application just crash   import  package flutter material dart    void main     gt  runApp new MyApp      class MyApp extends StatelessWidget        This widget is the root of your application     override   Widget build BuildContext context        return new Directionality textDirection  TextDirection ltr  child  new DefaultTextStyle              style  new TextStyle fontSize  10 0  color  Colors white               child  new Column children   lt Widget gt                 new Row children   lt Widget gt                   new Container color  Colors grey  child  new Column children   lt Widget gt                     new Align alignment  Alignment centerLeft  child  new Text  left                       new Align alignment  Alignment centerRight  child  new Text  right                                           new Container color  Colors grey  child  new Column children   lt Widget gt                     new Align alignment  Alignment centerLeft  child  new Text  left                       new Align alignment  Alignment centerRight  child  new Text  right                                                              new Row children   lt Widget gt                   new Container color  Colors grey  child  new Column children   lt Widget gt                     new SizedBox width  double infinity  child  new Text  left   textAlign  TextAlign left                       new SizedBox width  double infinity  child  new Text  right   textAlign  TextAlign right                                          new Container color  Colors grey  child  new Column children   lt Widget gt                     new SizedBox width  double infinity  child  new Text  left   textAlign  TextAlign left                      new SizedBox width  double infinity  child  new Text  right   textAlign  TextAlign right                                                                  What I get from code is    i e  text is centered  ignoring alignment of Align element

User · Answer

You can use the container  It will help you to set the alignment  Widget  buildListWidget  Map reminder     return Container    color  Colors amber    alignment  Alignment centerLeft    padding  EdgeInsets all 20     height  80    child  Column      mainAxisAlignment  MainAxisAlignment center      crossAxisAlignment  CrossAxisAlignment center      children   lt Widget gt         Container          alignment  Alignment centerLeft          child  Text            reminder  title              textAlign  TextAlign left            style  TextStyle              fontSize  16              color  Colors black              backgroundColor  Colors blue              fontWeight  FontWeight normal                                         Container          alignment  Alignment centerRight          child  Text            reminder  Date              textAlign  TextAlign right            style  TextStyle              fontSize  12              color  Colors grey              backgroundColor  Colors blue              fontWeight  FontWeight normal

User · Answer

In Colum widget Text alignment will be centred automatically  so use  crossAxisAlignment  CrossAxisAlignment start to align start   Column       crossAxisAlignment  CrossAxisAlignment start       children   lt Widget gt        Text          Text

User · Answer

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

User · Answer

Specify crossAxisAlignment  CrossAxisAlignment start in your column

User · Answer

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   lt Widget gt       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   lt Widget gt       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

User · Answer

You can align text anywhere in the scaffold or container except center - Its works for me anywhere in my application - new Text                    quot Nextperience quot      i have setted in center                   textAlign  TextAlign center     when i want it left      textAlign  TextAlign left     when i want it right      textAlign  TextAlign right                   style  TextStyle                       fontSize  16                       color  Colors blue 900                        fontWeight  FontWeight w500

User · Answer

For maximum flexibility  I usually prefer working with SizedBox like this   Row                                  children   lt Widget gt                                     SizedBox                                        width  235                                        child  Text  Hey                                         SizedBox                                        width  110                                        child  Text  how are                                      SizedBox                                        width  10                                        child  Text  you                                                                          I ve experienced problems with text alignment when using alignment in the past  whereas sizedbox always does the work

User · Answer

Set alignment  Alignment centerRight in Container    Container      alignment  Alignment centerRight      child Text          Hello

[flutter] Under which circumstances textAlign property works in Flutter?

Examples related to flutter

Examples related to text-alignment