Frameworks

Qué es Flutter

Como desarrolladores de software sabemos que ya no basta desarrollar una aplicación para un único sistema operativo o tipo de dispositivo, sino que debemos abarcar a un público objetivo lo más amplio posible. Más si cabe con la gran variedad de dispositivos que existen y que son usados por los usuarios, y es aquí donde Flutter tiene su principal baza, su versatilidad.

Este caso lo vemos por ejemplo cuando desarrollamos una aplicación y la hacemos responsive para que el contenido se vea correctamente en diversas pantallas, pero ya esto no basta y el mercado necesita diseños más flexibles para todo tipo de dispositivos, que incorporen interoperabilidad con las funciones propias del dispositivo.

Flutter es un framework de código abierto, creado por Google y que permite desarrollar aplicaciones para distintos dispositivos a partir de un mismo código. Es decir, codificando nuestra aplicación una única vez, esta sería compatible para dispositivos Android e IOS e incluso para aplicaciones web o de escritorio.

Es uno de los frameworks con más crecimiento para el desarrollo de apps móviles, aparte de la compatibilidad con los dispositivos móviles, permite adaptarse tanto al mundo web como al escritorio de ciertos dispositivos, siendo la adaptación completa y funcional.

El SDK (kit de desarrollo de software) de Flutter se basa en el lenguaje de programación Dart, con muchas semejanzas con Java o C. Este lenguaje ha sido, también, desarrollado por Google con el fin de convertirse en un sucesor de JavaScript. Dart se ejecuta directamente en el navegador, por lo que, en un servidor, los programas Dart se pueden ejecutar de forma directa mediante el compilador Dart2js, lo que nos indica que no es la primera ni última vez que escucharemos hablar sobre este lenguaje debido a su versatilidad y potencialidad.

Para qué sirve Flutter

Como hemos comentado con Flutter podemos diseñar aplicaciones con interfaces desde muy sencillas hasta interfaces muy vistosas y expresivas y que funcionan en todo tipo de dispositivos. Hasta 6 plataformas a partir de tan solo una única base de código escrita en Dart, increíble ¿no?

Para que experimentes con Flutter, te indicamos los primeros pasos para que puedas comenzar con tus primeros proyectos. Lo primero que necesitas saber es que, para desarrollar en este framework, necesitamos un IDE. Aunque existen varias alternativas, uno de los más estables y sencillos de utilizar es Android Studio, ya que en con una serie de sencillos pasos tendremos el SDK necesario y las dependencias. Eso sí, como contrapartida, Android Studio tiene una gran demanda de recursos por lo que las capacidades técnicas del ordenador deben ser medias, no estando de más poseer una tarjeta gráfica dedicada.

Paso 1: Crea un nuevo proyecto.

Si no te aparece la opción de Flutter en tu Android Studio debes instalar Flutter y el plugin para Android Studio correspondiente. Estos aspectos están bien documentados en la página oficial y seguro que no presenta ningún problema.

Como proyecto de Flutter tenemos 3 alternativas para empezar a codificar: aplicación, plugin o paquete. En nuestro caso, como simplemente queremos lanzar un mensaje por la consola, seleccionamos la opción Flutter Application.

En el siguiente paso se solicitan algunos datos sobre nuestra aplicación: nombre del proyecto, localización del SDK de Flutter (por defecto), directorio de archivos dónde queremos alojar el proyecto y una breve descripción del mismo.

Por último, debemos especificar el dominio de nuestro proyecto. Este parámetro se utiliza como el nombre raíz de los paquetes de nuestro proyecto, de esta forma la estructura de los paquetes es única y diferente de otros proyectos. Para hacer una pequeña prueba no es demasiado importante y puedes poner lo que quieras.

En este último paso, también, preguntan si queremos incluir soporte para Kotlin o Swift, para lanzar un simple mensaje por consola no es necesario, así que lo dejamos en blanco.

Después de estas simples opciones, se crea nuestro proyecto con una serie de carpetas y ficheros, dentro de la carpeta lib, hay un fichero llamado main.dart que es donde escribiremos nuestro código.

Paso 2: Empieza a programar

Sobre el fichero main.dart, escribimos una función main, una función especial de Dart que será lo primero que ejecute el programa. Un programa en Dart siempre buscará la función main para saber por dónde tiene que empezar, por tanto, todas las aplicaciones desarrolladas en Flutter deben tener una función main.

En este ejemplo, utilizamos la función print dentro de la función main para que nuestro programa imprima por consola el texto ”Hello Word!”.

void main() {
    print(‘Hello World!');
}

Paso 3: investiga y continúa mejorando tu app

¿Fácil verdad? Si tienes conocimientos en Java o #C, Dart comparte muchas semejanzas en la sintaxis del código.

Si ejecutamos el programa simplemente veremos en la consola nuestro mensaje. Para ver nuestra aplicación en forma de emulador de teléfono todavía nos queda un poco, pero este es tu primer mensaje bajo el framework de Flutter.

Ya es cuestión de que definas una buena arquitectura de tu proyecto, introduzcas una jerarquía de widgets y empieces a probar y practicar, con un poco de trabajo pronto aparecerá una vista como si fuera un dispositivo móvil para que puedas ver cómo va quedando tu aplicación.

Ventajas de usar Flutter

Rapidez en el desarrollo de apps

El desarrollo de aplicaciones móviles con este framework permite la creación de aplicaciones para Android e iOS, codificando el programa una única vez, lo que permite ahorrar tiempo y disponer de las apps en un menor tiempo. A la par las labores de mantenimiento también son más fáciles pues no tenemos que hacer el cambio o actualización en dos versiones diferentes.

Por otro lado, el lenguaje de programación Dart es bastante intuitivo y fácil de aprender, debemos recordar que el paradigma de programación de Flutter es de tipo widget, todo es un widget, lo que permite la modularidad y fácil mantenimiento. Además, guarda muchas similitudes con lenguajes como Java o C, por lo que la curva de aprendizaje no es tan elevada como otros lenguajes,

Por otro lado, tiene numerosas librerías, con una gran cantidad de elementos gráficos creados que propician la rápida creación de interfaces. Cada elemento genérico que necesitemos para nuestra aplicación, desde un botón o el acceso a ciertos elementos del dispositivo móvil como la cámara, ya están predefinidos, por lo que el tiempo de desarrollo es bastante corto.

Buen rendimiento

Flutter proporciona un rendimiento muy alto, comparándose incluso con apps de tipo nativas. Los módulos por defecto de Flutter incorporan funcionalidades muy interesantes como scrolling, funciones de navegación, gestión de permisos, … Estos aspectos permiten un comportamiento nativo haciendo que la velocidad de carga sea más rápida tanto en iOS como en Android que en otros frameworks de similares características.

Experiencia de usuario

Flutter utiliza diseños flexibles y con una interfaz cuidada centrándose en la experiencia de usuario. Además, debido a su arquitectura compuesta por capas el grado de personalización es absoluto, propiciando una alta calidad en la experiencia de usuario respetando a su vez las características de diseño de los dispositivos Android e iOS.

Confianza y seguridad

A pesar de que Flutter tienes apenas 4 años de vida ha conseguido generar confianza y seguridad entre los desarrolladores que trabajan con este framework. El hecho de que una empresa como Google este detrás de Flutter permite notar un cierto grado de confianza al conocer la experiencia que tienen en tecnología y desarrollo de software. En un próximo apartado te mostramos algunos ejemplos de uso, de compañías multinacionales que utilizan Flutter para sus aplicaciones más importantes.

Desventajas de usar Flutter

Como en cualquier aspecto de estudio, todo tiene ventajas y desventajas, a continuación, te comentamos algunas desventajas, aunque te adelantamos que las ventajas de usar este Framework para el desarrollo móvil son mayores que los inconvenientes.

Framework de reciente creación

Al tratarse de un framework reciente, su lanzamiento fue en el año 2017, la cantidad de recursos que existen es limitada, por lo que en ocasiones toca investigar sobre aspectos complejos u opciones personalizables. En ocasiones puede ser frustrante, porque para otras tecnologías más extendidas se disponen de multitud de profesionales, videotutoriales, recursos formativos, … a los que puedes acudir para resolver posibles dudas.

Lenguaje de programación nuevo y poco extendido

La comunidad de desarrolladores de Flutter y Dart es bastante reducida y eso radica en una menor cantidad de recursos y experiencias de uso. La primera versión de Dart es del año 2011, un tiempo de vida muy corto comparado con otros lenguajes como Java o #C. Por lo que a la hora de elegir una tecnología de desarrollo puede hacer que un cliente se decante por otras alternativas más extendidas.

Dificultad de integración de librerías de tercero y actualización de diseño

En ocasiones es difícil integrar y mantener librerías de terceros, además, como los módulos se integran de forma estática en el programa cada vez que hagamos una actualización hay que compilar el programa y volverlo a instalar en los dispositivos, lo que radica en dificultad de mantenimiento de las aplicaciones.

Ejemplos de casos de uso de Flutter:

Como bien dice el dicho, una imagen vale más que mil palabras, así que te mostramos varios ejemplos de aplicaciones que hacen uso de Flutter.

Alibaba y su APP Xianyu

Alibaba, el gigante asiatico del comercio electrónico utiliza este framework para sus desarrollos de APPs móviles. Su aplicación móvil Xianyu está íntegramente desarrollada en Flutter. Esta aplicación tiene más de 50 millones de descargas y más de 10 millones usuarios activos diariamente.

Google y su APP Google Ads

La aplicación de Google Ads está desarrollada en Flutter. Cabe recordar que Google Ads, una fuente de ingresos más elevada de Google, de ahí podemos sonsacar que Flutter es un tecnología fiable y estable. Con esta APP puedes mantener el funcionamiento de las campañas de Google Ads desde tu móvil, de ahí que recalquemos que está desarrolladamente íntegramente en Flutter.

Google Stadia

Google Stadia es un servicio de videojuegos basado en la nube altamente conocido en el mundo del gaming.

El equipo desarrolló esta aplicación con Flutter y, gracias a ello, pudo implementar funciones rápidamente en las versiones de iOS y Android. La base de código compartida de Flutter y las capacidades de recarga aumentaron la velocidad de desarrollo. Además, las pruebas automatizadas con Flutter fueron rápidas y confiables.

Reflectly

Se trata de una APP para los amantes de MindFulness con un gran uso diario, está desarrollada en Flutter y su funcionamiento está basado en algoritmos de inteligencia artificial. Esta App goza de gran popularidad entre los amantes del Wellness.

New York Times

The New York Times usó Flutter para crear una aplicación multiplataforma para sus lectores. Leído por millones todos los días, NYT buscaba nuevas formas de atraer a sus lectores y mejorar la experiencia del usuario.

My BMW App

La aplicación MyBMW permite a los propietarios de BMW interactuar con el automóvil, añadiendo funciones como bloquear, desbloquear, ubicar, monitorear y navegar usando su dispositivo móvil.

Esta aplicación se creó principalmente para iOS para diferentes modelos y variantes de vehículos. Aunque tenía una versión de Android, la discrepancia de características fue un gran desafío para BMW. La experiencia entre los usuarios de iOS y Android fue muy dispar, lo que afectó la imagen de la marca.

BMW decidió desarrollar una única aplicación en Flutter que permite disponer de las mismas funcionalidades para estos distintos tipos de dispositivos.

Conclusión

Espero que este artículo os haya servido para conocer mejor el framework de Flutter, no sabemos si Flutter será el futuro del desarrollo de apps, al menos no el único. La elección de Dart como lenguaje sustituto de JavaScript y el respaldo de la empresa Google, son sin duda sus potencialidades más acuciantes, y que dotan a esta Framework de una buena cuota de mercado en el desarrollo de aplicaciones móviles.

Cómo última muestra del grado de interés que está demostrando este framework, puedes ver en el siguiente gráfico la tendencia de búsqueda de Flutter y Dart para el período de 5 años:

Por último, recuerda que en OpenWebinars tenemos un taller para la creación de una aplicación con Flutter con Firebase, tienes el enlace aquí.