¿Cómo crear el diseño de tu app con Flutter?
En este Insight crearemos el diseño de una interfaz utilizando el framework de flutter.
Flutter es el sdk de google en la cual podemos crear aplicaciones de manera fácil, rápida, sencilla y esencialmente hermosas. Lo importante de este framework es que a partir de una sola base de código generamos aplicaciones tanto para IOS como para ANDROID.
A partir de la versión Flutter 2 podemos crear aplicaciones para 6 distintas plataformas entre ellas están el desarrollo para Desktop y Web, si quieres ver un artículo creando una aplicación para estas dos plataformas deja tu like.
La filosofía de flutter está en los widgets. Cada botón, Lista o texto está relacionado a un widget, estos pueden interactuar entre ellos y cambiar de un estado a otro, pero… Que es un Widget.
¿Qué es un widget?
El widget permite que nuestras aplicaciones tengan vida, se podría definir como pequeños bloques de código que definen el diseño de nuestra aplicación, cómo ya mencione un widget podría ser un botón, texto también una imagen, padding, margin o appBar. La unión de estos nos permitirá crear vistas muy creativas.
En el siguiente enlace podrás observar el catálogo de widgets creado por el framework de flutter:
Para el diseño de esta aplicación nos guiáremos del diseño del siguiente enlace:
Este diseño tendrá unos pequeños cambios con respecto al original, nuestro objetivo al finalizar este Insight sería obtener un diseño que sea vea de la siguiente manera:
¡¡Estamos listos, empecemos!!
Esta sería la estructura de nuestro proyecto, un dato muy importante, es mantener todo los archivos en su respectiva carpeta, ya que esto nos permitirá tener un proyecto ordenado y se nos facilitara localizar los archivos rápidamente.
Lo primero a tomar en cuenta al guiarnos de un diseño es dividirlo en varias capas o componentes, ya que realizar esta tarea nos ahorra tiempo en la codificación. En este caso cada división representa a un widget.
A continuación crearemos las capas que conformarán nuestra interfaz.
Así quedaría la división de nuestra interfaz, la capa principal contendrá nuestra 2 capas secundarias y a partir de esto crearemos los widget correspondientes a estas capas.
Comenzaremos a crear nuestros widgets personalizados, estos significa agrupar widgets que nos ofrece el framework de flutter y que en el futuro se podría utilizar en otras partes de nuestro código.
¡Así que, manos a la Obra!
Capa Principal
Una vez que hemos creado las capas, definiremos el árbol principal de nuestra interfaz, al copiar esta información podría mostrar algunos errores, ya que aún no hemos creados los demás widget, el código sería el siguiente:
El widget Scaffold es el pilar para construir nuestra interfaz ya que podremos mostrar los demás widgets, el widget Stack nos permite tener una capa sobre otra esta la realizamos para mostrar nuestro actionBar sobre la lista de los autos. El SingleChildScrollView nos permite hacer scroll por toda nuestra pantalla, con SafeArea lograremos mostrar cualquier widget debajo de la barra de notificaciones.
Capa secundaria 1
Container personalizado
Este widget tendrá el nombre ContainerBorder en la cual podremos brindarle un tamaño, forma, sombras y colocar cualquier tipo de widget hijo, estas podrían ser las formas que puede obtener:
El código para realizar nuestro widget será el siguiente:
El padre de este widget es el Container que espera como parámetro el ancho y largo, de igual manera podremos modificar tanto el margin como el padding en dado caso de no ser utilizado los valores serán asignado con el valor de cero, en el decoration del container se definirá que tipo de forma tendra nuestro widget, también la propiedad boxShadow obtendrá el valor del parámetro isBoxShadow para asignar o no sombreado a nuestro widget y por último el valor child ser el hijo que contendrá este container.
Widget Personalizado 1
Este representará nuestra AppBar personalizada y podrá ser reutilizada en cualquier otra parte de la interfaz de nuestro proyecto.
Este app bar se compone del widget Row con dos widget ContainerBorder, el Código para el appBar personalizado sera algo sencillo de realizar y sería el siguiente:
El widget padre de nuestro AppBar será un Padding que envuelve a un Sizebox aqui definimos el tamaño que tendrá nuestro appbar y estará envolviendo a un Row que contendrá los widgets de tipo ContainerBorder.
Un punto a tomar en cuenta, si necesitamos un contenedor para solo brindar un tamaño en específico lo mejor es utilizar el widget SizeBox, ya que el widget Container tienen muchas propiedades que no serán necesario utilizar en esta parte de nuestro código.
Widget personalizado 2
Este representará nuestra barra de búsqueda.
Al final el código de nuestro widget personalizado se vería así:
Utilizamos Container como widget principal, La propiedad double.infinity del Container nos permite tomar todo el ancho de nuestra pantalla. En el Row utilizamos la propiedad MainAxisAlignment.spaceBetween para que los widgets dentro del Row estén separados simétricamente.
Widget Personalizado 3
Este representará la lista de los tipos de vehículos que existen en la app.
El código sería el siguiente:
Este widget tiene como padre a un SizeBox que contendrá un Listview en la cual mostrará una lista de ContainerBorder, utilizamos la propiedad isCircle para obtener un contenedor redondeado.
Para llenar nuestro listview creamos un objeto donde guardamos todas las marcas de autos.
dataLogo sería nuestro objeto con las marcas de auto
Widget Personalizado 4
Este representará la lista de los tipos de automóviles disponibles.
El código se vería así:
Este widget personalizado está formado por un Column que contiene como hijo un SizeBox y un ListView. El SizeBox contiene un Row con los widget Text acompañado de un Icon. El listview mostrará una lista de ContainerCard. En nuestro listview la propiedad shrinkWrap: true y physics: const NeverScrollableScrollPhysics() nos permite seguir deslizándose en el SingleChildScrollview.
Card Personalizado
A Continuación mostraremos el widget Container Card, este mostrará información del tipo de vehículo y precio de alquiler por día.
El código para realizar el card seria el siguiente:
Para este widget tenemos como padre a un ContainerBorder donde definiremos el tamaño, el color, margen y el tipo de forma que tendrá este contenedor, este widget envuelve a un Row que contiene dos widgets Expanded. El widget Expanded obtiene todo el espacio disponible dentro de un contenedor, es por eso que declaramos dos dentro del Row para que compartan la misma cantidad de espacio.
Capa Secundaria 2
Este widget representará a nuestro BottomActionBar, para los iconos del Bar utilizamos una librería de terceros llamada FaIcon.
FaIcon es un widget que contiene Icon esta dependencia la puede es encontrar en el siguiente enlace:
El diseño quedaria de la siguiente manera:
El código se vería así:
El diseño de este widget contiene un Container como widget principal, la propiedad de borderRadius nos permite dar bordes redondeados en las esquinas y solo fue aplicado en la parte de topLeft y topRight.
Para este proyecto hemos utilizados StalessWidgets cuyo estado no puede cambiar, es decir si un Container tiene un color definido y este no cambia en el tiempo, este widget sería el candidato perfecto para utilizar.
En el siguiente Insight estaremos realizando conexión a una API RESTs y continuando el diseño del siguiente enlace:
Recuerda que todo en flutter es un Widget.
Si tienes dudas o sugerencias acerca del proyecto no olvides dejar tu comentario, ¡muchas gracias!
