¿Cómo crear una columna en Flutter?
El widget Column() es un widget básico de Flutter que te permite apilar varios widgets en un eje vertical (de arriba hacia abajo). Tiene una propiedad llamada children (hijos), en la que puedes colocar varios elementos visuales que se dispondrán de arriba hacia abajo. Por ejemplo, aquí tienes un ejemplo simple de un widget Column que contiene 3 widgets:
const Column(
children: <Widget>[
Text('Mi primer texto'),
Text('Mi segundo texto'),
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
)Colocar los elementos de mi columna a la izquierda, al centro o a la derecha
Para posicionar los elementos de una columna a lo largo del eje vertical, puedes usar la propiedad crossAxisAlignment. Luego puedes utilizar los siguientes métodos para alinear los elementos:
- A la izquierda: CrossAxisAlignment.start
- Al centro: CrossAxisAlignment.center
- A la derecha: CrossAxisAlignment.end
Aquí tienes un ejemplo de una columna con los elementos alineados a la izquierda:
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Mi primer texto'),
Text('Mi segundo texto'),
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
)Si los elementos dentro de la columna son más anchos que la propia columna, esta propiedad podría no aplicarse correctamente.
Flutter también proporciona las siguientes opciones:
- CrossAxisAlignment.stretch: Estira los widgets hijos a lo largo de todo el eje transversal. Esto significa que los widgets ocuparán todo el espacio disponible en el eje vertical.
- CrossAxisAlignment.baseline: Alinea los hijos en función de la línea base de sus caracteres. Esta opción es específica para el texto y requiere que la propiedad textBaseline esté configurada como TextBaseline.alphabetic.
Colocar los elementos de mi columna en la parte superior, al centro o en la parte inferior
Para colocar los elementos de una columna a lo largo del eje horizontal, puedes usar la propiedad mainAxisAlignment. Luego puedes utilizar los siguientes métodos para alinear los elementos:
- En la parte superior: MainAxisAlignment.start
- Al centro: MainAxisAlignment.center
- En la parte inferior: MainAxisAlignment.end
Aquí tienes un ejemplo de una columna donde los elementos están alineados al centro en el eje horizontal:
const Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Mi primer texto'),
Text('Mi segundo texto'),
Expanded(
child: FittedBox(
child: FlutterLogo(),
),
),
],
)Flutter también permite espaciar los widgets de manera equitativa con la opción MainAxisAlignment.spaceEvenly, lo que hará que los widgets ocupen todo el espacio disponible de manera uniforme.
Otra opción es MainAxisAlignment.spaceAround, que crea un espacio igual entre los widgets, pero añade la mitad de ese espacio en la parte superior del primer widget y en la parte inferior del último. En este caso, no se utiliza toda la altura disponible de la columna.
Hacer que un widget ocupe todo el espacio disponible en una columna
Imagina que has colocado varios elementos en una columna, dos de tamaño fijo y uno que debería ocupar el espacio restante. El widget Expanded() te permite crear este comportamiento.
Durante la compilación, primero se calcula el tamaño de la columna, luego el tamaño de los dos primeros elementos. Finalmente, Flutter calcula el espacio restante disponible y ajusta el último widget en función de ese espacio. Aquí tienes un ejemplo:
Container(
height: 80,
width: 120,
child: Column(
children: <Widget>[
Container(
height: 20,
color: Colors.red,
),
Container(
height: 20,
color: Colors.purple,
),
Expanded(
child: Container(
color: Colors.green,
),
),
],
),
)En este caso, mi columna tiene una altura de 80 píxeles, y los dos primeros containers tienen una altura de 20 píxeles. El último container ocupará el espacio restante disponible, que es de 40 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:
