¿En qué circunstancias funciona la propiedad textAlign en Flutter?

En el código siguiente, la textAlignpropiedad no funciona. Si quita el DefaultTextStyleenvoltorio que está varios niveles por encima, textAligncomienza a funcionar.

¿Por qué y cómo asegurarse de que siempre esté funcionando?

import 'package:flutter/material.dart';

void main() => 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: <Widget>[
        new Text("Should be left", textAlign: TextAlign.left,),
        new Text("Should be right", textAlign: TextAlign.right,)
      ],))
    );
  }
}

Ambos enfoques, sugeridos por Remi, aparentemente no funcionan "en la naturaleza". Aquí hay un ejemplo que anidé tanto dentro de filas como de columnas. El primer enfoque no se alinea y el segundo enfoque hace que la aplicación simplemente se bloquee:

import 'package:flutter/material.dart';

void main() => 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: <Widget>[
              new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  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: <Widget>[
                  new Align(alignment: Alignment.centerLeft, child: new Text("left")),
                  new Align(alignment: Alignment.centerRight, child: new Text("right")),
                ],)),
              ],),
              /*new Row(children: <Widget>[
                new Container(color: Colors.grey, child: new Column(children: <Widget>[
                  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: <Widget>[
                  new SizedBox(width: double.infinity, child: new Text("left", textAlign: TextAlign.left)),
                  new SizedBox(width: double.infinity, child: new Text("right", textAlign: TextAlign.right)),
                ],)),
              ],)*/]
    )));
  }
}

Lo que obtengo del código es

es decir, el texto está centrado, ignorando la alineación del Alignelemento.

DefaultTextStyleno está relacionado con el problema. Eliminarlo simplemente usa el estilo predeterminado, que es mucho más grande que el que usó, por lo que oculta el problema.

textAlignalinea el texto en el espacio ocupado por Textcuando ese espacio ocupado es más grande que el contenido real.

La cuestión es que, dentro de un Column, Textocupa el mínimo espacio. Entonces es el Columnque alinea a sus hijos con el crossAxisAlignmentque por defecto center.

Una manera fácil de detectar tal comportamiento es envolver sus textos de esta manera:

Container(
   color: Colors.red,
   child: Text(...)
)

Que usando el código que proporcionó, renderice lo siguiente:

El problema de repente se vuelve obvio: Textno tome todo el Columnancho.

Ahora tiene algunas soluciones.

Usted puede envolver su Texten una Alignde imitar textAlignel comportamiento

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
        ),
      ),
    ),
  ],
)

Que generará lo siguiente:

o puedes forzar tu Texta llenar el Columnancho.

Ya sea especificando crossAxisAlignment: CrossAxisAlignment.stretchen Columno usando SizedBoxcon un infinito width.

Column(
  children: <Widget>[
    SizedBox(
      width: double.infinity,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ],
),

que rinde lo siguiente:

En ese ejemplo, es el TextAlignque colocó el texto a la izquierda.

Especifique crossAxisAlignment: CrossAxisAlignment.starten su columna

textAlignLa propiedad solo funciona cuando queda más espacio para el Textcontenido de. A continuación se muestran 2 ejemplos que muestran cuándo textAlign tiene impacto y cuándo no.

Sin impacto

Por ejemplo, en este ejemplo, no tendrá ningún impacto porque no hay espacio adicional para el contenido del Text.

Text(
  "Hello",
  textAlign: TextAlign.end, // no impact
),

Tiene impacto

Si lo envuelve en un Containery proporciona un extra de widthmodo que tenga más espacio extra.

Container(
  width: 200,
  color: Colors.orange,
  child: Text(
    "Hello",
    textAlign: TextAlign.end, // has impact
  ),
)

En el widget Colum, la alineación del texto se centrará automáticamente, así crossAxisAlignment: CrossAxisAlignment.startque úsela para iniciar la alineación.

Column( 
    crossAxisAlignment: CrossAxisAlignment.start, 
    children: <Widget>[ 
    Text(""),
    Text(""),
    ]);

Colocado alignment: Alignment.centerRighten contenedor:

Container(
    alignment: Alignment.centerRight,
    child:Text(
       "Hello",
    ),
)

Para una máxima flexibilidad, normalmente prefiero trabajar con SizedBox así:

Row(
                                children: <Widget>[
                                  SizedBox(
                                      width: 235,
                                      child: Text('Hey, ')),
                                  SizedBox(
                                      width: 110,
                                      child: Text('how are'),
                                  SizedBox(
                                      width: 10,
                                      child: Text('you?'))
                                ],
                              )

He tenido problemas con la alineación del texto al usar la alineación en el pasado, mientras que sizebox siempre hace el trabajo.

Puede utilizar el contenedor, le ayudará a establecer la alineación.

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: <Widget>[
      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,
          ),
        ),
      ),
    ],
  ),
);
}

GestureDetector(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.all(5),
            color: buttonContainerColor,
            margin: EdgeInsets.only(top: 10.0),
            width: double.infinity,
            height: bottomContainerHeight,
            alignment: Alignment.center,
            child: Text(
              "CALCULATE",
              style: TextStyle(fontSize: 25.0, color: Colors.white),
            ),
          ),
        )