¿Por qué Row no se centra horizontalmente dentro de una columna?

Aug 17 2020

Como sabemos por defecto, Column centra horizontalmente a sus hijos si tiene el ancho completo. Pero cuando coloco dos cartas y una fila dentro de una columna, ¿dos cartas se colocan horizontalmente en el centro por aleteo pero la fila permanece igual en su posición inicial? ¿Por qué?
Creo que la fila debería estar horizontalmente en el centro porque es un elemento secundario de Column en mi caso, pero no lo es.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Container(
        color: Colors.purple,
        height: double.infinity,
        child: Column(
          //  mainAxisAlignment: MainAxisAlignment.center,
          //  crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Text(
                'Chart',
                style: TextStyle(fontSize: 20.0),
              ),
              elevation: 5,
              color: Colors.blue,
            ),
            Card(
              child: Text(
                'list of tx',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              color: Colors.purple,
            ),
            Row(
              children: [
                Text('this is row'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}



salida de este código

Respuestas

1 Uni Aug 17 2020 at 16:14

Esto sucede porque, de forma predeterminada, Row ocupará todo el espacio horizontal. Puede solucionarlo diciéndole que ocupe el menor espacio posible:

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

La configuración de la mainAxisAlignmentfila en MainAxisAlignment.centerfuncionará solo si hay un widget dentro de la fila. Solo les dice a sus hijos que vayan al centro.

2 faroukosama Aug 17 2020 at 16:17

Por defecto, la mainAxisSizepropiedad está MainAxisSize.maxen el widget de fila , lo que tiene que hacer es simplemente cambiarlo a MainAxisSize.min, afectar por el widget principal, que en este ejemplo es la columna

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)
1 Yash Aug 17 2020 at 16:08

Intente pasar el mainAxisAlignmentargumento a su fila. Por ejemplo

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

Esto hará que los hijos de la fila estén centrados.