¿Cómo poner varios widgets en una misma fila con Row()?
El widget Row() es un widget básico que te permite alinear fácilmente varios widgets en un eje horizontal (de izquierda a derecha). Tiene una propiedad llamada children (hijos), en la que puedes colocar varios elementos visuales que se alinearán uno al lado del otro en la misma fila. Por ejemplo, aquí tienes un ejemplo simple de un widget Row con 3 widgets:
const Row(
children: <Widget>[
Text('Texto 1'),
Text('Texto 2'),
Text('Texto 3'),
],
)Colocar los widgets a la izquierda, en el centro o a la derecha de una fila
Para alinear los elementos de una fila a la izquierda, en el centro o a la derecha, puedes usar la propiedad mainAxisAlignment. Luego, utiliza los siguientes métodos para posicionar los elementos:
- A la izquierda:
MainAxisAlignment.start - En el centro:
MainAxisAlignment.center - A la derecha:
MainAxisAlignment.end
Aquí tienes un ejemplo de fila donde los elementos están alineados a la izquierda:
const Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('Texto 1'),
Text('Texto 2'),
Text('Texto 3'),
],
)Flutter también te permite distribuir equitativamente los widgets utilizando el método MainAxisAlignment.spaceEvenly, que hace que los widgets ocupen el mismo espacio en toda la fila.
El método MainAxisAlignment.spaceAround es ligeramente diferente, ya que crea un espacio igual entre cada widget, pero agrega la mitad de ese espacio a la izquierda del primer widget y a la derecha del último, por lo que no se utiliza toda la anchura de la fila.
Colocar widgets en la parte superior, central o inferior de una fila
Para alinear los widgets en la parte superior, central o inferior de una fila, puedes usar la propiedad crossAxisAlignment. Utiliza los siguientes métodos para alinear los widgets:
- En la parte superior:
CrossAxisAlignment.start - En el centro:
CrossAxisAlignment.center - En la parte inferior:
CrossAxisAlignment.end
Aquí tienes un ejemplo donde los widgets están alineados al centro según el eje vertical:
const Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Texto 1'),
Text('Texto 2'),
Text('Texto 3'),
],
)Flutter también ofrece otras opciones, como:
CrossAxisAlignment.stretch: Estira los hijos a lo largo de todo el eje horizontal, haciendo que ocupen todo el espacio disponible.CrossAxisAlignment.baseline: Permite alinear los widgets según la línea base de sus caracteres. Esta opción es específica para la claseTexty requiere que la propiedadtextBaselineesté configurada enTextBaseline.alphabetic.
Hacer que un widget ocupe todo el espacio disponible en una fila
Imagina que quieres colocar varios widgets en una fila, dos con un tamaño fijo y otro que debe ocupar el espacio restante. El widget Expanded() te permite crear este comportamiento.
Durante la compilación, primero se calcula el tamaño de la fila y luego el de los dos primeros elementos. Finalmente, Flutter calculará el espacio restante y ajustará el último widget a ese espacio. Aquí tienes un ejemplo:
Container(
height: 80,
width: 120,
child: Row(
children: <Widget>[
Container(
height: 30,
color: Colors.red,
),
Container(
height: 30,
color: Colors.purple,
),
Expanded(
child: Container(
color: Colors.green,
),
),
],
),
)En este caso, mi fila tiene un tamaño de 120 píxeles y mis dos primeros contenedores tienen un tamaño de 30 píxeles cada uno. El último contenedor ocupará el espacio restante, que es de 60 píxeles.
Conclusión
Ahora que ya sabes cómo disponer elementos, ¿por qué no empezar a agregar contenido a tu aplicación? En los siguientes artículos, aprenderás cómo añadir texto, imágenes, iconos y, sobre todo, botones para realizar acciones:
