Introducción a Flutter

En este artículo, explicaré sobre los conceptos fundamentales que debemos conocer para entrar al mundo del framework Flutter.

Flutter es un SDK (Kit de Desarrollo de Software) también conocido como marco de trabajo (framework) de código fuente abierto de desarrollo o libre para aplicaciones móviles híbridas y fue creada por Google. Se utiliza para el desarrollo de interfaces de usuario para aplicaciones móviles Android, iOS, y Web, ahora actualmente con una versión para escritorio también, así como método primario para crear aplicaciones para Google Fucsia.

Su principal ventaja radica en que genera código 100% nativo para cada plataforma, con lo que el rendimiento y la UX es totalmente idéntico a las aplicaciones nativas tradicionales. La más importante ventaja de Flutter es que desarrollas un solo proyecto para todos los sistemas operativos, lo que significa una reducción de costes y tiempo de producción, si lo vemos desde el punto de vista económico.

Funcionalidades de Flutter

• Calidad nativa: Las aplicaciones nativas se desarrollan específicamente para un sistema operativo, Flutter utiliza todas las ventajas de las aplicaciones nativas para conseguir calidad en el resultado final.
• Experiencia de usuario: Flutter incluye Material Design de Google y Cupertino de Apple, con lo que la experiencia de usuario es óptima y los interfaces de usuario idénticos a los de las aplicaciones desarrolladas por las propias compañías. 
• Tiempo de carga: Una de las principales causas de abandono de una aplicación es el tiempo que tarda en cargar, con Flutter se experimentan tiempos de carga por debajo de un segundo en cualquiera de los soportes iOS o Android. 
• Desarrollo ágil y rápido: Gracias a la característica hot-reload, puedes programar y ver los cambios en tiempo real en tu dispositivo o en los simuladores.

Otra de las ventajas de utilizar este framework es que da igual el sistema operativo que utilices, ya que puedes descargarlo para Windows, Mac o Linux desde el enlace oficial el cual te lo dejo acá (página oficial). 

Seguimos contando beneficios al utilizar Flutter, el framework tiene una comunidad en la que podrás compartir tus conocimientos, experiencias y/o buscar ayuda para tus dudas o problemas puntuales, es una comunidad bastante servicial y te recomiendo siempre brindar tu apoyo.

Algunas alternativas a Flutter

En un primer momento, Flutter es comparado con React Native, porque ambas plataformas usan la programación reactiva. De hecho, hay numerosos artículos que los comparan e incluso intentan predecir si Flutter reemplazaría totalmente a React Native. Pero aunque sean plataformas parecidas, cada una tiene su enfoque y utilidad para crear Apps. En estos momentos Google está corrigiendo bugs e incluyendo nuevas funciones a Flutter bastante rápido, mientras que el progreso de React Native está un poco atrasado y/o estancado. Hace poco que se lanzó la versión 0.6 con algunas mejoras. 

En cuanto a las WebApps (Cordoba / PhoneGap), tienen un enfoque totalmente distinto. Las WebApps están escritas en código HTML, CSS y JavaScript, y realmente la aplicación emula a un navegador web donde se ejecuta el código. 

Xamarin es la alternativa a tener en cuanta si se quiere compilar en nativo. Fue comprada por Microsoft y permite crear aplicaciones para Android, iOS y Windows Phone, aunque Microsoft ya ha comunicado que dejará el desarrollo de este sistema operativo móvil. El IDE que se utiliza es el Visual Studio y se programa en C#. Tiene la particularidad que permite crear proyectos multiplataforma, Xamarin Forms, o crear un proyecto para una plataforma en concreto, por ejemplo, crear una app para Android con C#. Como en el caso de Flutter, para crear aplicaciones en iOS es neceario hacerlo desde un Mac o tener acceso a un Mac desde el PC (Windows). Visual Studio está disponible para Windows y Mac (versión creada a partir de Mono), no está disponible para Linux.

Configuración e Instalación

Para empezar a programar en Flutter se necesita un ordenador con Windows, Linux o Mac. Es sencillo; debes descargar Flutter desde la página web y seguir los pasos para configurarlo dependiendo del sistema operativo que tengas. Posteriormente, debes instalar Android Studio para instalar el SDK de Android y el editor de texto o IDE para empezar a programar en Dart. Actualmente, el IntelliJ IDEA, Android Studio y Visual Studio Code soportan los plugins oficiales de Dart y Flutter. Por lo que es recomendable utilizar alguno de estos programas. 

Ten en cuenta que para compilar la app en iOS es necesario realizarlo desde un Mac con Xcode 9 o superior. En este caso, hay varios pasos adicionales en la instalación para configurarlo junto con Xcode. Los editores de código son los mismos que hemos comentado anteriormente. 

Por último, y aunque Android Studio y Xcode tienen emuladores de diferentes versiones de Android e iOS, es recomendable utilizar dispositivos físicos para realizar pruebas y comprobar como te está quedando la app durante el desarrollo. Porque a veces, surgen errores en los dispositivos físicos que en el emulador no aparecen. Además, hay funciones que no pueden probarse en el simulador, como por ejemplo las notificaciones push en iOS.

Instalando Plugin Flutter & Dart en Visual Studio Code

Primero instalaremos los plugins para Visual Studio Code, abrimos y en el apartado izquierdo o banner izquierdo hacemos clic en la opción "extensions".

Luego escribimos Flutter, nos mostrará una pequeña lista, y hacemos clic en la primera opción que es el plugin oficial, y luego clic en Instalar.

Instalando Plugin Flutter & Dart en Android Studio 

Para poder utilizar Flutter dentro del IDE de Android Studio by IntelliJ, primero instalaremos los plugins para este entorno, abrimos y en el apartado izquierdo o banner izquierdo hacemos clic en la opción "plugins".

Una vez seleccionado, hacemos clic en instalar y listo. Si en caso te solicita reiniciar el IDE de Android simplemente acepta.

A partir de este momento tu entorno habrá agregado una nueva opción para poder utilizar Flutter. 

Creando mi primera app

Una vez configurado los plugins de Dart, y Flutter dentro de nuestro entorno de desarrollo Visual Studio Code o Android Studio. Para nuestro caso será la primera opción debido al uso de recursos y por su rápida reacción a cambios en nuestro sistema operativo. Claro que utilizar directamente Android Studio, te permitirá realizar una mejor carga de componentes nativos, que a medidas que vayas trabajando con este framework irás dándote cuenta de ello.

Si estás en Windows deberás presionar (Ctrl + Shift + p) te mostrará una pequeña ventana indicándote que es lo que deseas crear, también conocido como Command Palette.

Dentro de la caja de texto escribirás lo siguiente: "Flutter: New Project", seguido de clic en ello.

Te listará el tipo de proyecto de Flutter que deseas, seleccionarás Application.

Ubicamos nuestro proyecto en el lugar donde deseamos empezar a trabajarlo.

Luego le damos el nombre con el que vamos a identificarlo, luego presionamos enter, y listo.