Aitor Sánchez - Blog - Nov. 1, 2023, 1:28 p.m.
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?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en el artículo de hoy vas a saber qué es Flutter, sus principales características y más cosas sobre él que responderán con creces las cuestiones antes mencionadas.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
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:
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…
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.
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.
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.
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:
Nota: Un StatelessWidget puede contener un StateFullWidget. Que esto no se especifica bien y es bastante importante.
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.
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.
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.
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.
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:
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.
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Dicho esto geniete, espero haberte ayudado con tus dudas sobre Flutter y nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!