Establece el espacio entre elementos en Row Flutter

Después de de esta larga búsqueda de información dimos con la respuesta este apuro que tienen muchos los usuarios. Te dejamos la respuesta y nuestro deseo es serte de mucha apoyo.

Solución:

Alineación del eje principal

comienzo – Coloque a los niños lo más cerca posible del inicio del eje principal.

final – Coloque a los niños lo más cerca posible del final del eje principal.

centrar – Coloque a los niños lo más cerca posible del centro del eje principal.

espacio entre – Coloque el espacio libre de manera uniforme entre los niños.

espacioalrededor – Coloque el espacio libre de manera uniforme entre los niños, así como la mitad de ese espacio antes y después del primer y último niño.

espacio uniformemente – Coloque el espacio libre uniformemente entre los niños, así como antes y después del primer y último niño.

Ejemplo:

  child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('Row1'),
          Text('Row2')
        ],
      )

Hay muchas formas de hacerlo, aquí enumero algunas:

1. Utilizar SizedBox si quieres establecer algún espacio específico

   Row(
     children: [
       Text("1"),
       SizedBox(width: 50), // give it width
       Text("2"),
     ],
   )
   

   

---

2. Utilizar Spacer si quieres que ambos estén lo más separados posible.

   Row(
     children: [
       Text("1"),
       Spacer(), // use Spacer
       Text("2"),
     ],
   )
   

   

---

3. Utilizar mainAxisAlignment de acuerdo a sus necesidades:

   Row(
     mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need
     children: [
       Text("1"),
       Text("2"),
     ],
   )
   

   

---

4. Utilizar Wrap en lugar de Row y dar un poco spacing

   Wrap(
     spacing: 100, // set spacing here
     children: [
       Text("1"),
       Text("2"),
     ],
   )
   

   

---

5. Utilizar Wrap en lugar de Row y dale alineación

   Wrap(
     alignment: WrapAlignment.spaceAround, // set your alignment
     children: [
       Text("1"),
       Text("2"),
     ],
   )
   

   

Puede usar espaciadores si todo lo que desea es un poco de espacio entre los elementos en una fila. El siguiente ejemplo centra 2 widgets de texto dentro de una fila con algo de espacio entre ellos.

Espaciador crea un espaciador vacío ajustable que se puede usar para ajustar el espacio entre los widgets en un Flex contenedor, como Row o Column.

en un rowsi queremos poner espacio entre dos widgets de manera que ocupe todo el espacio restante.

    widget = Row (
    children: [
      Spacer(flex: 20),
      Text(
        "Item #1",
      ),
      Spacer(),  // Defaults to flex: 1
      Text(
        "Item #2",
      ),
      Spacer(flex: 20),
    ]
  );

---

---

Utiliza Nuestro Buscador