Layouts en Flutter — Filas y Columnas
¿Quieres Aprender a perfeccionar los diseños que creas para tus apps en Flutter? Entonces esta serie de Artículos es para ti.
Aprenderás con pequeños pedazos de código demostrando diseños reales y diferentes casos de uso que podrás implementar en tus aplicaciones.
En ésta primera parte veremos dos de los widgets más importantes para estructurar tus diseños: Row y Column, utilizados para crear filas y columnas respectivamente además de un widget que nos permitirá ocupar todo el espacio disponible llamado Expanded.
Tanto Row como Column son widgets multi-hijo por lo que si solamente posicionarás un elemento, deberías considerar utilizar otro widget como Align o Center.
También es importante mencionar que estos widgets no hacen scroll y sería un error tener más widgets de los que cabrían en pantalla. Si requieres poder hacer scroll cuando no haya más espacio puedes usar un ListView.
Column y Row tienen las mismas propiedades, así que en los siguientes ejemplos vamos a trabajar con ambos widgets a la vez.
La propiedad children
Usamos la propiedad children para especificar la lista de widgets hijos que tendrá nuestro componente.
Podemos remplazar la asignación directa de la lista por una variable:
Main axis alignment
Ésta propiedad nos permite especificar como los widgets hijo deberían ser alineados sobre el eje principal(verticalmente para las columnas y horizontalmente para las filas).
MainAxisAlignment.start
Posiciona los widget hijos lo más cerca posible del comienzo del eje principal. Es el valor por defecto, por lo que si deseas utilizarla, no es necesario especificarlo.
MainAxisAlignment.end
Posiciona los widget hijos lo más cerca posible del final del eje principal.
MainAxisAlignment.center
Posiciona los widget hijos lo más cerca posible del centro del eje principal.
MainAxisAlignment.spaceBetween
Posiciona el espacio en blanco disponible de forma uniforme entre los widget hijo.
MainAxisAlignment.spaceAround
Posiciona el espacio en blanco disponible de forma uniforme entre los widget hijo, así como la mitad de ese espacio antes y después del primer y último widget hijo.
MainAxisAlignment.spaceEvenly
Posiciona el espacio en blanco disponible de forma uniforme entre los widget hijo, así como antes y después del primer y último widget hijo.
MainAxisSize
Al utilizar ésta propiedad podemos asignar el espacio libre ocupado después de que se reparta el espacio entre los widget hijo.
MainAxisSize.min
Minimiza la cantidad de espacio libre en el eje principal. Es el valor por defecto, por lo que si deseas utilizarla, no es necesario especificarlo.
MainAxisSize.max
Maximiza la cantidad de espacio libre en el eje principal. Es el valor por defecto, por lo que si deseas utilizarla, no es necesario especificarlo.
CrossAxisAlignment
Con ésta propiedad podemos definir como deberían posicionarse los hijos a lo largo del eje transversal.
CrossAxisAlignment.start
Alinea los hijos con el comienzo del eje transversal.
CrossAxisAlignment.end
Posiciona los hijos lo más cerca posible del final del eje transversal.
CrossAxisAlignment.center
Posiciona los hijos de tal forma que sus centros se alineen con el centro del eje transversal. Es el valor por defecto, por lo que si deseas utilizarla no es necesario especificarlo.
CrossAxisAlignment.stretch
Con ésta propiedad los hijos toman todo el espacio disponible en el eje transversal.
CrossAxisAlignment.baseline y TextBaseline
Posiciona a los hijos a lo largo del eje transversal de manera que coincidan sus líneas base. Si el eje principal es vertical, el valor se toma como CrossAxisAlignment.start debido a que sus líneas base son siempre horizontales.
Al utilizar ésta propiedad es obligatorio especificar también la propiedad TextBaseline que es una línea horizontal usada para alinear el texto y que puede tomar dos valores: alphabetic, usada para caracteres alfabéticos e ideographic usada para caracteres ideográficos.
TextDirection
Determina la dirección en la que fluye el texto.
Para lenguajes escritos de izquierda a derecha como el Español, Inglés, Chino, entre otros utilizamos la propiedad TextDirection.ltr
Para lenguajes escritos de derecha a izquierda como el Árabe o Hebreo utilizamos la propiedad TextDirection.rtl
La localización por defecto de los widgets en Flutter es de inglés americano, que se escribe de izquierda a derecha.
VerticalDirection
Especifica la dirección en la que los elementos fluyen verticalmente.
Al usar la propiedad VerticalDirection.down los elementos comienzan en la parte superior y empiezan a apilarse hacia la parte inferior. Es el valor por defecto, por lo que si deseas utilizarla no es necesario especificarlo.
Al usar la propiedad VerticalDirection.up los elementos comienzan en la parte inferior y empiezan a apilarse hacia la parte superior.
Uso de Filas y Columnas
La mayoría de nuestros diseños requerirán de una u otra forma el uso de Columnas y Filas. Comenzaremos nuestro primer diseño replicando un mensaje de chat de la popular aplicación de mensajería WhatsApp.
Convirtiendo el diseño en Filas y Columnas
Tomamos un único chat y tratamos de identificar los elementos que lo componen. Nuestro diseño cuenta con una foto de perfil, nombre de usuario, mensaje, hora del mensaje y el número de mensajes sin leer.
Luego dividimos los elementos en tres diferentes secciones:
Sección izquierda: Foto de perfil
Sección central: Nombre de usuario y mensaje
Sección derecha: Hora del mensaje y número de mensajes sin leer
Del diseño a Flutter
En nuestro archivo main.dart creamos nuestra aplicación MyApp la cual tendrá como ruta raíz nuestro widget WhatsChat.
En el archivo whats.dart creamos nuestro widget WhatsChat que contiene en el cuerpo el chat que acabamos de abstraer.
Comenzamos creando una variable con una url que contendrá la imagen a mostrar(puedes usar la foto que desees).
Luego definimos un Padding para dejar un pequeño espacio en blanco de 16px.
Las tres secciones que definimos previamente están alineadas horizontalmente así que utilizamos un Row que contendrá nuestras secciones.
La sección izquierda consta unicamente de una imagen circular por lo que podemos utilizar un CircleAvatar.
Para la sección central usamos un Expanded widget que como su nombre lo indica se expande para ocupar todo el espacio restante. Después dejamos un padding izquierdo de 16px.
El nombre y el mensaje están alineados verticalmente así que usamos una Columna. Debemos usar la propiedad mainAxisSize: MainAxisSize.min para que la columna ocupe sólo el espacio necesario verticalmente. También ocupamos la propiedad crossAxisAlignment: CrossAxisAlignment.start para alinear el texto a la izquierda.
Para el nombre y el mensaje empleamos el widget Text con estilos personalizados.
Por último creamos la sección derecha, usamos una columna porque la sección tiene dos elementos apilados verticalmente.
Empleamos el widget Text para la hora del mensaje y un CircleAvatar con un Text anidado para el contador de mensajes no leídos.
¡Y listo! Si corremos nuestra aplicación deberemos ver la siguiente belleza:
El layout que acabamos de crear es tan común que flutter nos provee de el widget ListTile, queda como ejercicio hacer el mismo layout utilizando ListTile.
Creando un inicio de sesión
Vamos a continuar con otro de los layouts más comunes en las aplicaciones, una pantalla de inicio de sesión.
Volvemos a identificar los componentes y separarlos usando columnas y filas.
Los componentes que tenemos son: Texto de inicia sesión, TextField de correo, TextField de contraseña, Botón de cancelar y Botón de iniciar sesión. También identificamos que necesitamos una Columna para todos los componentes y una fila para alinear los botones horizontalmente.
En próximos artículos exploraremos layouts más complejos que te permitirán llevar tus diseños a otro nivel, sin embargo, hoy aprendimos a utilizar dos de los widgets más importantes a la hora de estructurar tus aplicaciones.
¿Tienes alguna duda, sugerencia u opinión? ¡No olvides dejarla en los comentarios!
Mis artículos son gratuitos pero siempre puedes apoyarme dejando apretado el botón de aplauso y regalarme 50 👏, eso me motiva a seguir escribiendo.
Puedes seguirme en Twitter, Github, LinkedIn o mandarme un correo a alexmaguey1@gmail.com
¡Gracias por leer y hasta la próxima!
