Interfaces con Flutter

Javier Batres
4 min readAug 28, 2020

Las aplicaciones móviles son un desafío en el desarrollo por muchas razones y una de las principales es el diseño de interfaces, los usuarios esperan ver aplicaciones amigables, intuitivas y bellas, pero es complicado lograrlo. Hace ya un tiempo Google presento la Alpha de Flutter, su nuevo framework que utiliza un lenguaje también desarrollado por ellos llamado Dart. Con este framework podríamos crear interfaces super amigables en muy poco tiempo y pues hoy en día ya estamos en la versión 1.0 de esta poderosa herramienta y puedo decir que en efecto cumplieron y superaron las expectativas.

Dart es un lenguaje creado por Google en el año 2011 o bueno hasta ese punto supimos de él. Este lenguaje es interesante ya que podríamos decir que es como una combinación de JavaScript en su estructura, pero también de Java por sus conceptos de programación orientada a objetos. La verdad es que su principal característica a destacar es que es un lenguaje declarativo y no imperativo como los demás. Esto significa que el lenguaje no se trata de dar ordenes si no de definir valores.

Como dije antes, este es un framework que opera sobre Dart y está enfocado en aplicaciones móviles. En Flutter hay varios conceptos interesantes, pero realmente lo más importante es entender que prácticamente todo es un widget, esto se debe a que realmente todo es un componente, todo puede ser usado después y todo se puede separar en bloques más y más pequeños.

Ahora bien, esto nos da un cierto nivel de complejidad a la hora de hacer la interfaz que nos exige esa palabrita de cinco letras “orden” ya que como son tantas piezas todas se ubican en un árbol para poder asignar peso a cada propiedad y organizarlas.

Como comentaba anteriormente en Flutter prácticamente todo es un widget y la realidad es que existen dos tipos de widgets con interesantes diferencias.

Este tipo es el más común y es que lo veras en muchas piezas de ese árbol que crearemos. La mejor definición que se me ocurre de esto es que “los widgets sin estado son aquellos con los que el usuario no interactúa”. Con esto me refiero a las imágenes, los textos y demás que el usuario ve y no puede clicar o tocar.

Por supuesto es la contra parte del anterior, si los widgets sin estado son aquellos con los que el usuario no tiene interacción, los widgets con estado si tienen interacción a los toques.

No, el desarrollo móvil con Flutter no es un desarrollo hibrido, realmente existen muchas formas de hacer una aplicación para móviles, las tres principales son las hibridas, nativas y de la que hablamos ahora Cross Platform o bien plataforma cruzada.

Este concepto se basa en que el código que creamos para las aplicaciones se compila para las necesidades que tenemos. Esto significa que a diferencia del hibrido si terminamos con una aplicación nativa y no la ejecutamos en un tipo de navegador.

Como hablamos anteriormente los métodos de Cross Platform utilizan el código que les damos y lo convierten a código nativo, ahora bien, la gran mayoría funciona utilizando un tipo de puente entre el sistema operativo y su funcionalidad. Sin embargo, Flutter opera de forma directa con el sistema operativo.

Como han visto a mi me gusta poner en practica los temas de los que escribo y este no será la excepción hace poco termine un curso sobre la elaboración de interfaces con Flutter en Platzi y construimos unas interfaces que personalmente considero excelentes en muy poco tiempo.

Les dejo el enlace del repositorio donde pueden ver estas interfaces y el enlace del curso.

Repo: https://goo.gl/u6uArf

Curso: https://goo.gl/ujqE7H

Descarga el PDF de este post en: https://goo.gl/sWY9Pp

Originally published at http://fjbatresv.com.

--

--

Javier Batres

I have 27 years and almost 9developing software professionally. Specialized on web and mobile. Google Developer, Tech Speaker and Writer.