En el desarrollo de aplicaciones móviles, junto con las plataformas de desarrollo nativo (iOS y Android), hay otras, denominadas híbridas, que permiten desarrollar aplicaciones para múltiples plataformas manteniendo una base de código común: PhoneGap, Ionic, React Native, Xamarin y desde hace poco, Flutter. ¿Quieres aprender a programar con Flutter? Aquí daremos los primeros pasos.

Veamos qué es Flutter

Flutter logo

Flutter en un SDK de código abierto, con un origen alrededor de 2015, pero que no fue lanzado oficialmente por Google hasta diciembre de 2018 lanzado en 2017 por Google. Flutter usa como Dart como lenguaje de programación, además de C++ y Skia como motores de renderizado.

El lenguaje de programación Dart

Dart logo

Dart es un lenguage de código abierto, cuya primera versión estable salió a la luz en 2011. La idea de Dart es facilitar su uso por parte de los desarrolladores, por lo que cuenta con ua serie de herramientas y utilidades integradas muy amplia: su propio gestor de dependencias, compiladores… y, además, presenta una sintáxis similar a Javascript o Java.

Se trata de un fuertemente tipado y orientado a objetos. Desde el punto de vista de las aplicaciones móviles, Dart admite la compilación JIT (Just In Time), lo que permite a Flutter recompilar directamente mientras al aplicación se esta ejecutando (Hot Reload), y AOT (Ahead Of Time), que permite la compilación en código nativo.

Viaje al interior de Flutter: los Widgets

En Flutter podemos decir que todo funciona alrededor de los Widgets.

Un Widget es un componente que nos ayuda a definir y construir la interfaz de la aplicaciones (sería algo así, como las UIView en iOs, o las Views en Android). En Flutter todo es un Widget, todo los que nos permite construir la aplicación (hasta podemos considerar que la apliación es un widget).

En Flutter se pueden crear Widgets con estilos que reproducen los de iOS (usando la librería Cupertino) o Android (usando la librería Material Design), pero también podemos crear los nuestros propios.

¿Elijo Flutter? Pros y contras de Flutter

Como en todo, Flutter presenta una serie de ventajas y de desventajas que hat que tener en cuenta a la hora de usarlo. Si quieres aprender a programar con Flutter debes saber cuales son estos pros y contras.

Pros

  • Al tener la misma base de código para iOS y Android, permite un desarrollo relativamente rápido.
  • El Hot Reload, nos permite ver instantáneamente (normalmente) los cambios realizados, ya que no hace falta recompilar el código.
  • Flutter, aparte de iOS y Android, también permite compilar para web (actualización).Es perfecto para desarrollar MVP (Minimum Viable Product) con las funcionalidades justas.
  • Presenta un curva de aprendizaje bastante rápida y tiene una comunidad de desarrolladores creciente.

Contras

  • Flutter es bastante nuevo y, por lo tanto, inmaduro. Dart también es inmaduro si lo comparamos con Swift o Kotlin.
  • El hecho de que tanto Flutter como Dart están en continuo desarrollo (y con cambios que se producen de manera rápida), dificulta el mantenimiento del código a largo plazo.
  • Flutter no aprovecha aún todas las capacidades de los sistemas operativos para los que compila las apliaciones (lo que si se puede hacer en el desarrollo nativo), con muchas bibliotecas todavía en desarrollo.
  • Si bien existen librerías (Cupertino o Material Design) que reproducen el estilo de las aplicaciones nativas, no son 100% iguales a estas.
  • Muchas de las funcionalidades que se consiguen nativamente en iOS o Android, se consigue en Flutter gracias a librerías de terceros, lo que aumenta la dependencia del desarrollo. Además, el número de estas librerías es todavía relativamente bajo, por lo que nos podemos encontrar con el hecho de tener que desarrollar nuestra propia librería (lo que aumentará el tiempo de desarrollo).
  • Comparadas con las aplicaciones nativas, las aplicaciones de Flutter son más grandes (ocupan más espacio) y al ejecutarlas, suelen consumir más memoria de los dispositivos.
  • Un apunte final a tener en cuenta: no sería la primera vez que Google cierra un proyecto, lo que hace que el futuro de Flutter sera algo incierto.

Vamos a instalar Flutter en el ordenador

Vamos a ver cómo podemos instalar Flutter en un sistema operativo macOS:

  • En primer lugar descargamos el último paquete estable de Flutter.
  • Lo movemos a la carpeta en la que queramos descomprimirlo y lo descromprimimos.
  • Si no queremos descargar la carpeta, podemos instalarlo via git:
  • El siguiente paso es añadir Flutter al System Path, mediante:
  • Verificamos el directorio con:
  • Y comprobamos que funciona con:

¿Qué más necesito a parte de Flutter?

Si queremos desarrollar, compilar y probar aplicaciones en iOS y Android, necesitaremoes tener instalados los respectivos SDK (Xcode y Android Studio). Para saber qué necesitamos instalar en nuestro ordenador ejecutamos en la terminal el siguiente comando:

Tal como se puede ver, en este caso faltaría todo lo relacionado con el desaroollo para Android.

flutter doctor
Resultado del comando flutter doctor.

Nuestra primera aplicación en Flutter

Para crear nuestra primera aplicación en fluter simplemente hemos de ir al directorio donde queremos crearla:

Y escribimos:

Donde ‘my_first_flutter_app’ lo puedes cambiar por el nombre que se quiere dar a la aplicación.

Una vez hecho esto, flutter lanza un proceso de creación de la estructura de archivos y ficheros de la aplicación.

Si ahora accedes al directorio podrás ver algo parecido a lo siguiente:

Flutter app folder
Estructura de carpetas y archivos (actualizada).

Podemos ver carpetas específicas para Android y iOS (con los ficheros específicos de cada una de estas plataformas). Actualización, la carpeta web nos muestra el contenido si compilamos la app para ser mostrada como web.

¡Y ponemos la aplicación en marcha!

Ahora vamos a poner en marcha la aplicación que hemos creado. Para ello, si estas usando Xcode, inicia el simulador y luego, desde dentro de la carpeta de la aplicación ejecuta:

Flutter iniciará el proceso de compilación, enlace y firma de la app, y la ejecutará en el simulador:

Flutter run log
Log del comando flutter run.
Flutter app demo
Aplicación de demostración de Flutter.

Conclusiones

¿Quieres aprender a programar con Flutter? En este artículo hemos dado nuestros primeros pasos con Flutter. Hemos visto qué es Flutter, cómo funciona, cuáles son sus ventajas e inconvenientes y cómo crear nuestra primera aplicación con Flutter.


1 comentario

Conoce cómo se construye en Flutter: los Widgets - Thinking In Swift · 7 noviembre 2020 a las 14:51

[…] un artículo anterior, en el que hago una introducción a Flutter, comentaba la importancia de lo widgets en Flutter. […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme en Feedly