Espacio entre los hijos de Column en Flutter

107

Tengo un Columnwidget con dos TextFieldwidgets cuando era niño y quiero tener algo de espacio entre ambos.

Ya lo intenté mainAxisAlignment: MainAxisAlignment.spaceAround, pero el resultado no fue el que quería.

Sachin Soma
fuente
3
Simplemente coloque SizedBox (altura: 15.0,), entre los dos TextField
anmol.majhail
margin: EdgeInsets.only(left: 200.0, top: 300.0))
user7856586

Respuestas:

133

Puede usar un Paddingwidget entre esos dos widgets o envolver esos widgets con Paddingwidget.

Actualizar

El widget SizedBox se puede usar entre dos widgets para agregar espacio entre dos widgets y hace que el código sea más legible que el widget de relleno.

Ex:

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),
Viren V Varasadiya
fuente
6
Seguro que desearía que esa columnclase tuviera esa propiedad incluida. Será una pérdida de tiempo de codificación para conseguir un relleno entre todos los niños.
Haroun Hajem
¿Cómo puede envolver dos widgets en un widget de relleno cuando los widgets de relleno solo toman un único parámetro secundario?
ScottF
@ScottF la respuesta dijo que el Paddingwidget va entre los 2 widgets. No es que los 2 widgets se conviertan en hijos de Padding.
marcusljx
2
Dice directamente "o envuelve esos widgets con el widget de relleno" ...
ScottF
@ScottF Convierta al niño en una columna o fila con los dos widgets como niños.
Riley Fitzpatrick
140

Puede poner un SizedBoxcon un específico heightentre los widgets, así:

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ],
),

¿Por qué preferir esto a envolver los widgets Padding? ¡Legibilidad! Hay menos texto repetitivo visual, menos sangría y el código sigue el orden de lectura típico.

Marcel
fuente
Agregar un cuadro de tamaño es como agregar una vista vacía, ¿verdad? ¿No daría lugar a problemas?
user5381191
SizedBoxes solo un widget normal que tiene el tamaño deseado que intenta tener durante el diseño, pero no representa nada. Todos los widgets de hoja como Text o Container también están vacíos, así que está bien.
Marcel
50

puede usar el Wrap()widget en su lugar Column()para agregar espacio entre los widgets secundarios y usar la propiedad de espaciado para dar un espaciado igual entre los niños

Wrap(
  spacing: 20, // to apply margin in the main axis of the wrap
  runSpacing: 20, // to apply margin in the cross axis of the wrap
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)
Mahdi Tohidloo
fuente
1
Úselo en runSpacinglugar de spacingpara espacios entre elementos espaciados verticalmente
Arpit
Esto funcionó para mí. Creo que es la mejor solución, pero ¿cuáles serían las desventajas de usar Wrap () en lugar de Column ()?
Lima Chaves
1
Column es un widget expandido, mientras que Wrap no lo es. así que cuando desee expandir todo el espacio del padre, debe usar widgets expandidos como Columna o Fila, etc. Esto depende de su caso
Mahdi Tohidloo
Sí, esto es mucho mejor que envolver a cada niño individualmente. Buena sugerencia.
KevinH
31

Solo usa relleno para envolverlo así:

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

También puede utilizar Container (padding ...) o SizeBox (height: xx). El último es el más común, pero dependerá de cómo quieras administrar el espacio de tus widgets, me gusta usar el relleno si el espacio es parte del widget y usar sizebox para listas, por ejemplo.

dmarquina
fuente
¿Hay alguna manera de hacer algo como CSS grid-gap?
Aseem
15

Hay muchas formas de hacerlo, aquí enumero algunas.

  1. Usa Containery dale algo de altura:

    Column(
      children: <Widget>[
        Widget1(),
        Container(height: 10), // set height
        Widget2(),
      ],
    )
    
  2. Utilizar Spacer

    Column(
      children: <Widget>[
        Widget1(),
        Spacer(), // use Spacer
        Widget2(),
      ],
    )
    
  3. Utilizar Expanded

    Column(
      children: <Widget>[
        Widget1(),
        Expanded(child: SizedBox()), // use Expanded
        Widget2(),
      ],
    )
    
  4. Utilizar mainAxisAlignment

    Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )
    
  5. Utilizar Wrap

    Wrap(
      direction: Axis.vertical, // make sure to set this
      spacing: 20, // set your spacing
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )
    
CopsOnRoad
fuente
8
Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)

Spacer crea un espacio flexible para insertar en un widget [Flexible]. (Como una columna)

usuario9139407
fuente
5
Agregue alguna explicación a su respuesta para ayudar a otros a comprenderla mejor. Las respuestas de solo código se consideran de mala educación y es posible que no ayuden al OP a comprender el problema con el que está tratando de ayudar.
Michael
7

De la misma manera que SizedBox se usa arriba con el propósito de la legibilidad del código, puede usar el widget Padding de la misma manera y no tener que convertirlo en un widget padre para ninguno de los hijos de la columna.

Column(
  children: <Widget>[
    FirstWidget(),
    Padding(padding: EdgeInsets.only(top: 40.0)),
    SecondWidget(),
  ]
)
Al-Ameen
fuente
2

Puede resolver este problema de diferentes maneras.

Si usa Row / Column , debe usar mainAxisAlignment: MainAxisAlignment.spaceEvenly

Si usa Wrap Widget, debe usar runSpacing: 5, spacing: 10,

En cualquier lugar puede usar SizeBox ()

Md.Tarikul Islam
fuente
1

Columnas No tiene altura por defecto, puede envolver su columna al contenedor y agregar la altura específica a su contenedor. Entonces puedes usar algo como a continuación:

Container(
   width: double.infinity,//Your desire Width
   height: height,//Your desire Height
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two')
      ],
   ),
),
Ali Esfandiari
fuente
1

Aquí hay muchas respuestas, pero pondré aquí la más importante que todos deberían usar.

1. Columna

 Column(
          children: <Widget>[
            Text('Widget A'), //Can be any widget
            SizedBox(height: 20,), //height is space betweeen your top and bottom widget
            Text('Widget B'), //Can be any widget
          ],
        ),

2. Envuelva

     Wrap(
          direction: Axis.vertical, // We have to declare Axis.vertical, otherwise by default widget are drawn in horizontal order
            spacing: 20, // Add spacing one time which is same for all other widgets in the children list
            children: <Widget>[
              Text('Widget A'), // Can be any widget
              Text('Widget B'), // Can be any widget
            ]
        )
jitsm555
fuente
0
Column(children: <Widget>[
   Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
   Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);
Bhargav Sejpal
fuente
0

Puede que tenga que usar el widget SizedBox () entre los hijos de su columna. Espero que te sea de utilidad

Issa
fuente
Si tiene una nueva pregunta, hágala haciendo clic en el botón Preguntar . Incluya un enlace a esta pregunta si ayuda a proporcionar contexto. - De la opinión
Bruno
Esto no proporciona una respuesta a la pregunta. Una vez que tenga suficiente reputación , podrá comentar en cualquier publicación ; en su lugar, proporcione respuestas que no requieran aclaración por parte del autor de la pregunta . - De la opinión
Ram Sharma
-1

La caja de tamaño no ayudará en el caso, el teléfono está en modo horizontal.

body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ],
     )
ABHISHEK KUMAR
fuente