Flutter alinea dos elementos en los extremos: uno a la izquierda y otro a la derecha

95

Estoy tratando de alinear dos elementos en los extremos, uno a la izquierda y otro a la derecha. Tengo una fila que está alineada a la izquierda y luego un hijo de esa fila está alineado a la derecha. Sin embargo, parece que la fila secundaria está recogiendo la propiedad de alineación de su padre. Este es mi codigo

var SettingsRow = new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Right",softWrap: true,),
            ],
        );

        var nameRow = new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Left"),
                SettingsRow,
            ],
        );

como resultado obtengo algo como esto

Left Right

Lo que me gustaría es

Left      Right

También hay suficiente espacio en la fila. Mi pregunta es ¿por qué el niño Row no exhibe su MainAxisAlignment.endpropiedad?

flutter flutter-layout MistyD
fuente

Respuestas:

195

Utilice un single en su Rowlugar, con mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

O puedes usar Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);
Rémi Rousselet
fuente
2
En el segundo ejemplo utilizo el suyo settingsRow, que contieneText("right")
Rémi Rousselet
Veo.
Me
Gracias. Pero, por curiosidad, ¿por qué no funciona mi código? La mainAxisAlignmentdel niño no ocurre. ¿Las propiedades de los padres superan a las de los niños?
MistyD
1
El segundo es mucho mejor.
Raghu Mudem
1
@KPradeepKumarReddy Si no teme que estos dos widgets puedan superponerse si sus tamaños son demasiado grandes, sugiero usar Stack y luego dos niños envueltos en Align widgets (uno con Alignment.center, otro con Alignment.centerRight). O bien, tenga tres widgets expandidos en su fila con flex: 1. Primero contendrá un espacio en blanco (SizedBox), segundo - su widget centrado (envuelto en Center) y tercero que contenga su widget alineado a la derecha.
Alex Semeniuk
71

Una solución simple sería usar Spacer()entre los dos widgets

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);
Pritish
fuente
¿Qué hace Spacer ()? En una fila, quiero mantener un widget en el centro y otro en el extremo derecho. ¿Es esto posible usando spacer ()?
K Pradeep Kumar Reddy
51

Puedes hacerlo de muchas formas.

Utilizando mainAxisAlignment: MainAxisAlignment.spaceBetween

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
  ],
);

Utilizando Spacer

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

Utilizando Expanded

Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(child: SizedBox()),
    FlutterLogo(),
  ],
);

Utilizando Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

Salida :

ingrese la descripción de la imagen aquí

CopsOnRoad
fuente
Quiero un widget en el centro y otro en el extremo derecho. ¿Cómo podemos lograrlo?
K Pradeep Kumar Reddy
@KPradeepKumarReddy Un buen enfoque es usarlo Stacken ese caso.
CopsOnRoad
@KPradeepKumarReddy Estoy seguro de que ya debe haber alguna pregunta como esta en SO, todo lo que necesita hacer es buscar con la palabra clave correcta. Realmente no puedo mostrarles el código aquí en el comentario, pero la idea es usar Stack, con su primer hijo Align(correcto) y el segundo podría ser un Centero simple Align.
CopsOnRoad
1

Sí, CopsOnRoades correcto, a través de la pila puede alinear uno a la derecha y otro en el centro.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )
poonam kalra
fuente