Saltar al contenido

¿Qué es Flutter? | APRENDE todo lo que necesitas sobre este SDK aquí

Qué es Flutter

Si alguna vez te has preguntado ¿qué es esto de Flutter? O, quizás ¿cómo puedo comenzar a usarlo? O, incluso ¿qué características tiene en comparación con el resto de Frameworks?

En caso de haberte realizado alguna de estas preguntas, solo decirte que no estás solo. Todos, en algún momento, y sobre todo los que nos dedicamos al desarrollo de apps, nos la hemos hecho. El libre de culpa que tire la primera piedra.

Cómo ya sabrás, mi nombre es Aitor y soy desarrollador de Software, especializado en apps, desde 2014 y en el artículo de hoy te voy a contar qué es Flutter, sus principales características y más cosas que responderán con creces las cuestiones antes mencionadas.

Pero antes de continuar, me he tomado la molestia de hacer este artículo en video porque se que hay muchos lectores que les gusta más ver que leer. Solo te pido que, si el video te ha gustado, te suscribas al canal. Es muy importante para mí y lo puedes hacer desde aquí.

¿Qué es Flutter?

En resumidas cuentas, se trata de un conjunto de herramientas de desarrollo que nos agiliza muchísimo el desarrollo de aplicaciones móviles. Se centra, sobre todo, en la parte más gráfica de la app. Que, a fin de cuentas, es de las más tediosas para la mayoría desarrolladores.

Por nombrar algunas características antes de continuar:

  • Todo el código se realiza en el mismo lenguaje
  • Tiene un montón de componentes prediseñados
  • Cuenta con plantillas editables de gran calidad
  • Está pensado desde su base para hacer apps mucho más rápido

Vamos, que es un SDK pensado para que nosotros, cómo desarrolladores, obviemos toda la parte de administración de una app y nos dediquemos en exclusiva a crear un MVP de la manera más veloz y cómoda posible.

Pero no todo queda en el MVP, dado que tiene un sinfín de características que lo hacen una elección perfecta para la mayoría de los proyectos de apps. Sigue leyendo…

 

La comunidad de Flutter

A pesar de que es un sistema bastante joven, ya cuenta con una gran comunidad de desarrolladores detrás de él.

Hasta el mismo Google (padre del SDK) tiene a un equipo de más de 1000 personas dando soporte por detrás al Framework.

A parte de lo antes mencionado, hay muchas más personas involucradas en crear más módulos que nos permitirán agregar funcionalidad y creatividad a nuestras apps de una manera super sencilla.

Cómo te he dicho, la administración de paquetes y demás cosas así, es super simple, cómo podrás ver en el curso que estoy haciendo sobre él. Si no te lo quieres perder pásate por aquí (El circulo) y te suscribes. Mandaré información sobre él en cuanto lo tenga más o menos listo.

 

Dart cómo lenguaje de programación

Bien, no solo Flutter es algo “nuevo” en su conjunto. También lo es el lenguaje de programación que utiliza.

En esta caso, hablamos de Dart. Un lenguaje de programación que apareció en el mercado en octubre de 2011 con su primera versión. Es desarrollado también por Google, al igual que Flutter, y su última versión estable (2.2) fue lanzada en Febrero de 2019.

Se trata de un lenguaje que cambia un poco el paradigma actual de la programación, aunque haya muchos que digan que no, para ser más rápido de desarrollar con las ventajas de un lenguaje orientado a objetos fuertemente tipado.

También es cierto que los que sabemos programar en Java, o C#, lo vamos a entender con facilidad, pero nos va a costar un poquito más ser productivos con él. Sobre todo, por cómo hace uso de las vistas. Es más cómo programar un juego en si mismo, que una aplicación en lo que a vista se refiere.

Para terminar este punto, Dart se puso más “de moda” (llegando casi al 2% de desarrolladores en el mundo) cuando apareció Flutter. Antes de esto era casi inexistente.

 

Compilación con SKIA

SKIA es el conjunto de herramientas que utiliza Flutter para poder realizar todo el trabajo visual de nuestras aplicaciones.

A diferencia de otros Frameworks cómo puede ser Ionic que usan estándares HTML para tal fin, SKIA es 100% nativo y nos da unos rendimiento de 10 en comparación con los antes mencionados.

El mero hecho de compilar nativo nos permite llegar a tasas de refresco de 60 FPS al utilizar la GPU del sistema en lugar de renderizar por Software cómo, de nuevo, hacen los que basan su capa en un navegador web.

Por parte del sistema, únicamente, necesitaremos un canvas en blanco. En Android sería una SurfaceView y en iOS su homólogo.

Es cierto de que al requerir solo ese componente y llevar todo lo demás integrado en si mismo, sacrificamos algo más de tamaño del APK. Pero es un coste más que asumible para los beneficios que finalmente reporta.

 

Cómo son las vistas de Flutter

Seguimos avanzando con el artículo hasta llegar a uno de los puntos que, a mí, personalmente, más me gustan de él. Es el caso de los Widgets.

En Flutter, todo lo que vemos en pantalla, TODO, son Widgets. Dichos Widgets son modificables y extensibles al 100%. Esto significa que podemos modificar cualquier cosa de la pantalla a nuestro antojo.

¿Y esto cómo se consigue? Pues muy sencillo. Los widgets tienen un atributo “child” que nos permitirá meter un Widget dentro de otro Widget. Al igual que las listas, o grids, que son Widgets en sí mismas, que tienen una que se llama “children” que recibe un array de Widgets.

Párate a pensar durante un segundo esto. Es potentísimo. En resumen, nos permite poner lo que queramos donde queramos dentro de la pantalla. A parte, es totalmente responsivo con el diseño y se adapta perfectamente al ancho de la pantalla.

Por poner una pequeña pega, con lo único que me he peleado un poco más de la cuenta es con las grids. El alto de las rejillas es un poco complejo de trata, pero fuera de eso, super sencillo e intuitivo. Eso sí, aquí es donde vas a notar la diferencia de usar otro tipo de sistemas para hacer apps. Cómo el nativo, o Ionic.

Antes de continuar, quiero decirte que los Widgets tienen 2 estados. Aunque todo esto lo aprenderemos en el curso que estoy haciendo (pásate por aquí y te suscribes. Así te enterarás de todo cuando lo vaya avanzando) veámoslos por encima:

  • StateFullWidget: Su usará cuando necesitamos actualizar el contenido del Widget de manera dinámica. Por ejemplo, un botón que se activa y desactiva dependiendo de si un input está rellanado o no.
  • StateLessWidget: Al contrario que el anterior, es para cuando el Widget en si mismo no necesita actualizarse en tiempo real.

Nota: Un StatelessWidget puede contener un StateFullWidget. Que esto no se especifica bien y es bastante importante.

 

La documentación

Otro gran punto a favor de este SDK es la gran documentación que tiene. Si en algún momento te atascas con algo, o quieres sabes cómo utilizar cualquier componente en si mismo, esta será tu amiga.

No me quiero explayar de más en el artículo, así que solo decirte que te pases por ella y veas lo enorme que es. Lo puedes hacer aquí: Documentación

Y en el caso de que no encuentres algo sobre algún componente que no esté en el core del SDK, los mismos espacios del repositorio de Dart, de donde instalaremos esta funcionalidad adicional, suelen estar super bien explicados.

 

Flutter es 100% nativo

Esta es, posiblemente, la características más importante junto con la última que vamos a ver en este artículo.

Pues sí, la build es totalmente nativa en todas las plataformas donde se puede desplegar. Es más, en Android, en iOS no estoy totalmente seguro, hace uso del NDK (Native Development Kit) para determinadas funcionalidades.

Lo del NDK, a fin de cuentas, se trata de una capa de abstracción debajo del SDK de usamos para programar nuestras apps nativas. Así que flipa hasta el punto que llega.

Esto, cómo imaginarás, le da un chute grandísimo de rendimiento en comparación con la competencia. Vistas a 60 FPS, uso de la GPU y mucho más rendimiento en general.

A parte del tema de la parte visual, al hacerlo de esta manera, Flutter elimina cualquier intermediario, o bridge, para poder comunicarse con la parte nativa del sistema. Haciendo que cuando usemos, por ejemplo, los sensores o la lectura/escritura sobre el dispositivo, sea mucho más rápida.

El bridge que usa Ionic es Apache Cordova y el que usa React es uno construido por ellos, pero no deja de ser un puente entre el “navegador” y la parte nativa.

En definitiva, el rendimiento está CASI tan cerca cómo el desarrollo nativo.

Y, cómo he dicho al comienzo, con una sola base de código la podremos compilar para todas las plataformas.

 

Utiliza Hot-Reloading

Para quien no sepa lo que es este palabro, es, básicamente, la posibilidad de poder ver los cambios que vayamos haciendo en nuestra app reflejados en la misma sin necesidad de realizar una compilación previa.

Esto se puede conseguir dado a la construcción de Flutter en si misma. Recuerda, lo veremos con más profundidad en el curso, así que pásate por aquí y suscríbete. Informaré sobre este tema del curso cuando lo vaya actualizando.

Pero, en resumen, al solo usar una capa para poder pintar sobre ella no es necesario actualizar la app dado que siempre será la misma. Solo será necesario actualizar el contenido que aparece en ella.

Hilando el párrafo anterior, cuando guardemos cambios, Flutter enviará directamente este código a nuestra app y un micro-server se encargará de recogerla y actualizarla.

Vale, pues ya sabiendo lo que es. El hot-reloading hace que, de media, nuestros tiempos de desarrollo se vean reducidos en casi la mitad. Si, en casi la mitad. Fíjate la cantidad de tiempo que perdemos al tener que estar recompilando la app cada vez que tenemos que hacer un cambio, por pequeño que sea.

Es cierto que, en las nuevas versiones de Android, han implementado algo así. Pero aún no funciona ni la mitad de bien que este mismo.

Únicamente comentar que, si los cambios introducidos se realizan, por ejemplo, en el constructor o se inicializan con la clase, si que será necesario recompilar la app para que se vean reflejados.

 

Todo se programa en Dart

Aunque creo que lo he comentado un poco antes, tengo que recordar su importancia. Todo, y cuando digo todo es todo, se programa en DART. Esto es una ventaja enorme en lo que supone tiempo de desarrollo.

Solo te hará falta conocer un lenguaje en profundidad para ser un pedazo de profesional. También lo veremos en el curso cómo utilizarlo de manera correcta y estructurada.

 

¿A qué plataformas compila?

He decidido dejar este punto para el final, al igual que he hecho en el video, por que es importante remarcar que desde la versión 2.0 de Flutter podremos desplegar para las siguiente plataformas:

  • Android
  • iOS
  • Web
  • Escritorio

Ahora bien, y a diferencia de otros Frameworks cómo pude ser Electron, también hará la Build a nativo en Escritorio.

Así que se nos abre la puerta de que, con solo una base de código, compilar a nativo para todas estas plataformas, no se puede pedir más.

 

Info adicional

Es importante que sepas, que yo, personalmente, utilizo este SDK para hacer mis apps. No es algo que te lo esté soltando aquí desde el desconocimiento ni mucho menos. Es más, en mi canal de YT en el que te puedes suscribir desde aquí, cuento mi día a día con esta herramienta y consejos y cositas muy chulas sobre él. Así que considero de importancia que te pases por él, verás que no te arrepientes.

Por otro lado, y cómo te he dicho en varias ocasiones a lo largo del artículo, es importante que te pases por “El Circulo” aquí. Es una comunidad que estoy montando alrededor del desarrollo de apps donde te enseñaré a hacerte un sueldo programando para el móvil.

Sin nada más que agregar, me despido ya. Solo espero que te vaya todo genial y nos vemos Enel siguiente artículo. ¡Hasta entonces, que te vaya bien!