Código Flutter

En el capítulo anterior definimos hablamos de los widgets y de cómo se usan para crear toda la interfaz de cada pantalla en Flutter.

Hoy hablaremos de los dos tipos de widgets que hay, Stateless widget y stateful widget, o lo que es lo mismo, widget sin estado o con estado.

Efectivamente, los widgets pueden tener o no estado, ¿qué significa eso?, muy fácil. Los widgets sin estado son aquellos que no van a cambiar, son inmutables y se pintan una sola vez. Por ejemplo un Text, el widget Text está pensado para mostrar un texto y punto, se puede personalizar el formato y todo lo que queramos, pero una vez que se pinte no cambiará. Los widgets que no tienen estado con clases que heredan de la clase StatelessWidget.

Por otro lado tenemos los widgets con estado que sí pueden subrir cambios durante la visualización de la pantalla. Un ejemplo de este tipo de widgets es TextField, cuyo contenido claramente cambiará cuando lo seleccionemos para excribir un texto. Este tipo de widgets heredan de la clase StatefulWidget.

¿Qué sentido tiene que se separen los widgets en estos tipos?, ¿por qué no hacemos todos los widget con estado y así los podemos cambiar si lo necesitamos?. La respuesta es sencilla, por el rendimiento. Si le decimos a Flutter que un widget no tiene estado, lo pintará una vez y se olvidará, no tendrá que estar mirando si lo tiene que refrescar.

Esta muy bien saber esto para comprender la naturaleza de los widgets que ya nos proporciona Flutter, pero cuando realmente necesitamos esto es a la hora de crear nuestros propios widgets, totalmente necesario si queremos dar funcionalidad a nuestra app.

Las principales diferencias a tener en cuenta a la hora de crear nuestros widgets son las siguientes:

Stateless Widget: Widget sin estado

Hereda de la clase StatelessWidgetHay que sobre-escribir su método build para devolver el árbol de widget que queremos que se pintePodemos pasarle parámetros en su constructorSe pintará una sola vez y no volverá a cambiar

Stateful Widget: Widget con estado

Hereda de la clase StatefulWidgetNecesita otra objeto que herede de State para controlar el estado del widgetHay que sobre-escribir el método createState para devolver este objeto de estado También hay que sobre-escribir el método build para devolver el árbol de widgets que se va a pintar, pero esta vez lo hacemos en el objeto de estado.Podemos cambiar el estado cuando lo necesitemos a través del método setState para volver a pintar el widget con los cambios que hayamos realizado

Para comprenderlo, hablaremos de la app de ejemplo que se crea en Android Studio cuando iniciamos un nuevo proyecto de Flutter.

Una de las primeras cosas que aprendemos cuando comenzamos con Flutter, es lo que son los widget. Toda la interfaz de una app está compuesta por widgets.

¿Qué es un widget?

Para definirlo de forma rápida, un widget es cada uno de los componentes de la interfaz de una aplicación de Flutter. Todos los componentes que vemos como botones, textos, imágenes, listados, menús… son wigdets

Pero no sólo los componentes que vemos son widgets, también otros elementos que no vemos. Unos widgets llamados layouts nos permiten estructurar, distribuir y colocar otros widgets como queramos. Por ejemplo un widget «Column» nos permitirá situar unos elementos sobre otros como su propio nombre nos permite deducir, y por su parte el widget Row está pensado para hacer lo mismo pero horizontalmente.

Cada pantalla de la aplicación es un árbol de widgets, desde la propia pantalla hasta el último icono, todos son widgets que se colocan unos dentro de otros.

Cada widget tiene una serie de propiedades que nos permiten personalizar y definir su contenido o comportamiento. Por ejemplo un botón puede tener una propiedad para definir su color de fondo, otra para definir la función que se ejecutará cuando se pulse sobre él y otra propiedad para elegir otro widget que irá dentro de él (de ahí lo del árbol de widgets), que seguramente será un icono o un texto.

Pensados para facilitarnos la vida

El concepto de que las interfaces de usuario estén compuestas de un árbol de elementos no es nada nuevo, lo que sí es destacable en Flutter es la facilidad con la que se pueden hacer las interfaces de usuario gracias a esos widgets.

Esto es así sobre todo por dos motivos, en mi opinión. En primer lugar por la facilidad y rapidez con la que podemos insertar un widget, con unas pocas líneas podemos definir el elemento que queremos y darle valor a sus propiedades. Y en segundo lugar por todos los widgets que ya están hechos y que nos facilitan mucho la vida, hay un widget para cada uno de los elementos típicos de una aplicación. Están muy bien pensados y nos dan justo las propiedades que necesitamos, lo que nos ahorra mucho tiempo.

Vamos a hablar de este concepto tan interesante en el capítulo de esta semana.

Una de las cosas por las que he decidido aprender Flutter, es porque las aplicaciones que genera mantienen una calidad nativa. Pero ¿a qué me refiero con calidad nativa?, ¿cómo consigue Flutter hacer aplicaciones multi-plataforma manteniendo este nivel?

Cuando digo «calidad nativa» me refiero a que las aplicaciones tienen el mismo nivel de fluidez y rendimiento que una aplicación desarrollada con el SDK oficial de Android o de IOS (bueno… seguramente si nos ponemos a medir datos exaustivamente las aplicaciones nativas seguirán ganando, pero bajo mi experiencia el nivel de Flutter es altísimo y la diferencia inapreciable).

¿Cómo consigue Flutter?, para comprenderlo hablemos un poco de cómo funcionan las otras tecnologías de desarrollo multi-plataforma o «híbridas».

Por un lado tenemos tecnologías como phonegap que lo que hacen es básicamente utilizar HTML, CSS y Javascript para hacer una especie de web local embebida en una app. La app que genera es solamente un pequeño navegador web que pinta esta web que «simula» ser una aplicación, para entendernos. Esto está muy bien y tiene una serie de puntos fueres que son obvios, pero la realidad es que la diferencia de calidad o rendimiento entre una aplicación desarrollada de esta forma y una aplicación nativa es evidente.

Luego tenemos tecnologías como React Native, que va un paso más allá y aunque la base es parecida a lo anterior y también se programa con javascript, utiliza los componentes nativos de los sistemas operativos. Esto es una mejora considerable bajo mi punto de vista y lo cierto es que se nota.

Pero luego tenemos a Flutter que nos presenta otra forma diferente de hacer las aplicaciones multi-plataforma. ¿Alguna vez habéis programado un videojuevo con algún motor gráfico como Unity? sabréis entonces que Unity permite que sus juegos se exporten como app y se ejecuten en móviles. En este caso tienen su propio engine o motor de renderizado que, para entendernos, directamente le dice a la máquina lo que tiene que pintar, saltándose a los componentes del sistema operativo, directamente habla con el procesador para que pinte lo que quiere, en este caso los gráficos de un juego. Pues Flutter funciona exactamente igual, pasa de los SDK oficiales y presenta su propio motor de renderizado para decirle directamente al procesador, directamente a la máquina, qué es lo que tiene que pintar, solo que en este caso en lugar de pintar personajes, escenarios y gráficos de videojuego, pinta botones, textos y menús como una app.

Flutter se inventa sus propios componentes y el código escrito en Dart se compila a lenguaje de procesador para que pueda ser ejecutado tanto en IOS como en Android. Esto es lo que hace que su opción multi-plataforma tenga esa fluidez y ese buen rendimiento y «calidad nativa».

Por cosas como esta es por lo que creo que Flutter tiene mucho futuro.

Esta semana os explico por qué he decidido aprender flutter, qué me ha llamado la atención de este framework y cuáles son los puntos fuertes que yo le veo.

Cuando te dedicas a la programación, hay que estar siempre al día de lo que va saliendo y cada cierto tiempo hay que escoger algún lenguaje o framework en el que queramos especializarnos. Con suerte, como ha sido mi caso, en ocasiones aparece una nueva tecnología que encaja contigo, con lo que te gusta, con el tipo de proyectos que quieres hacer, con a que te sientes cómodo.

¿Por qué he decidido dedicar a aprender Flutter el poco tiempo libre que tengo?

Porque me gusta el desarrollo de apps para móviles

Parece una razón obvia, pero en programación hay muchísimas áreas. Te puedes dedicar a la web, al backend, a los videojuegos, a la realidad virtual, a la inteligencia artificial… en mi caso me interesa mucho la programación de apps para móviles. Por eso hacer tiempo que estaba dedicándome a aprender Android.

Android me gusta mucho, también me siento muy cómodo con él y puedo hacer cosas muy interesantes, pero al especializándome en Android tenía una gran desventaja, mis apps no valían para IOS. Por eso el siguiente punto ha sido clave para escoger flutter

Desarrollo multiplataforma

Efectivamente, con Flutter podemos tener nuestra app funcionando en los dos principales sistemas operativos para móviles con una sola base de código. Me gusta mucho Android, pero siempre he pensado que si un día una de mis apps tuviera cierto éxito tendría una limitación si no está también en IOS. No quería programar para los dos sistemas porque, aunque estoy seguro de que me lo pasaría muy bien programando para iPhone, creo que es mejor especializarse en un único entorno para hacer las cosas bien. Además pensando en desarrollar una app para un posible cliente, es una limitación el no ser capaz de ofrecerles su app en los dos sistemas.

Con Flutter esto queda resuelto, con un sólo proyecto puedo hacer que mi app funcionen en Android y en IOS.

Seguramente estaréis pensando que esto no es nada nuevo, ya existen infinidad de frameworks que te permiten hacer esto. Pues efectivamente, pero ahí entran el resto de los motivos que describo a continuación.

Calidad nativa

Así es, las apps programadas con este framework tienen una calidad nativa. Otros frameworks también permiten tener un único proyecto para IOS y Android, pero perdiendo calidad.

¿Por qué tiene un buen rendimiento si no estamos usando el SDK propio de cada sistema nativo?, ya lo explicaremos en otro episodio

Productividad

Otro gran punto a favor de Flutter es que puedo desarrollar rápido, sin tener que esperar minutos desesperantes para ver cómo queda cambio que hago.

Yo vengo de aprender Android (repito que me encanta y me sigue encantando) y cada vez que se hace un cambio y queremos verlo reflejado en el emulador o en el móvil para ver cómo queda, hay que esperar en ocasiones varios para ver cuál es el resultado. Esto obviamente lastra nuestra productividad. Flutter tiene algo que se llama hot reload, que nos permite ver prácticamente al instante cada cambio que estamos haciendo, esto es algo que se nota muchísimo en el día a día.

Además, haciendo spoiler de mis dos siguientes puntos, el lenguaje de programación Dart y la forma de construir las interfaces a través de widgets, también hace que mejoren mis tiempos de programación

Estoy cómodo con Dart

Dart es un lenguaje de programación ideado por la gente de Google y que han elegido para Flutter. Al principio he de confesar que era un poco reticente a probar este lenguaje que ni me sonaba, pero lo cierto es que me ha terminado ganando. Ya hablaremos de él, pero es un lenguaje que tiene muchas características de los lenguajes modernos de programación y para los que venimos de otros más clásicos como java no se hace nada difícil de aprender.

No diré que es mejor o peor lenguaje que otros, porque en mi opinión por suerte hay much

En diciembre de 2018, hace pocas semanas, se presentó la versión 1.0 de flutter, un framework de desarrollo de aplicaciones móviles de Google.

Creo que flutter tiene mucho futuro y que merece la pena dedicar tiempo a aprenderlo bien y a conocerlo bien porque pueden venir muchas oportunidades si lo hacemos. Por eso he creado este podcast, para explicar y compartir las cosas interesantes que pueda aprender sobre esta tecnología tan interesante.

Cada semana estaré por aquí unos minutos explicando algo relacionado con este fantástico framework. Espero que os apetezca acompañarme y que nos escuchemos cada semana. Hasta la semana que viene