title: Under which circumstances textAlign property works in Flutter?
body: <p>In the code below, <code>textAlign</code> property doesn't work. If you remove <code>DefaultTextStyle</code> wrapper which is several levels above, <code>textAlign</code> starts to work.</p>
  
  <p>Why and how to ensure it is always working?</p>
  
  <pre><code>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,)
        ],))
      );
    }
  }
  </code></pre>
  
  <hr>
  
  <p>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:</p>
  
  <pre><code>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)),
                  ],)),
                ],)*/]
      )));
    }
  }
  </code></pre>
  
  <hr>
  
  <p>What I get from code is</p>
  
  <p><a href="https://i.stack.imgur.com/4GyeR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4GyeR.png" alt="enter image description here"></a></p>
  
  <p>i.e. text is centered, ignoring alignment of <code>Align</code> element.</p>