Flutter I: Introducción al desarrollo

Post actualizado: 29 de Julio de 2018

Flutter es el nuevo framework presentado por Google para desarrollar aplicaciones nativas usando Dart, cuya principal característica es la posibilidad de poder exportar con un único código para Android e IOS (Y en el futuro a Fuchsia).

Flutter pinta en pantalla haciendo uso de Skia (engine gráfico 2D) y está basado en una arquitectura funcional-reactiva inspirada en React.

Actualmente Flutter se encuentra en su versión Release Preview 1, y desde que se anuncio su beta 3 Google asegura que se puede usar ya en producción.

La imagen anterior muestra la arquitectura general de Flutter, el cual nos provee todo lo necesario para trabajar con animaciones, gestos en pantalla o acceder a los servicios del teléfono (GPS, Bluetooth, etc.) y como añadido trae ya implementada una colección de widgets basados en la guía de diseño Material Design.

¿Por qué me ha llamado la atención Flutter?

Utiliza Dart como único lenguaje para trabajar con él, es un lenguaje bastante bonito en cuanto a su sintaxis (me recuerda bastante a Js) y realmente fácil de aprender para los que conocemos ya Java u otro lenguaje orientado a objetos.

Por otra parte me sorprendió su rendimiento frente a otras opciones como Cordova que utiliza tecnologías webs, Xamarin o React Native. A la hora de compilar la versión de producción de nuestra app con Flutter, este genera código nativo para ambas plataformas (Android/IOS) consiguiendo así un rendimiento de 60fps.

¿Cómo empiezo a trabajar con Flutter?

NOTA: Solo he probado Flutter desde Linux y MacOS, y los comandos que se mostraran a lo largo del post no valen en Windows, para configurar Flutter en Windows puedes seguir esta guía.

Para poder bajar el SDK de Flutter necesitas Git instalado en el sistema, una vez instalado:

$ git clone https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH

Y al ejecutar por primera vez Flutter, este bajará todas las dependencias necesarias:

$ flutter

Finalmente, puedes comprobar que todo está bien, ejecutando el ‘doctor’ de Flutter:

$ flutter doctor

Se mostrará la información acerca de la instalación, y los plugins:

Configurar Android Studio para Flutter

Aunque también es posible configurar el editor de texto Atom o el IDE VStudio Code para trabajar sobre Flutter, yo utilizare Android Studio para que cuando tenga que editar cosas referentes a Android no tenga que cambiarme de IDE.

Éstos son el plugin de Dart (para la revisión del código) y el plugin de Flutter que te permite correr las apps en los dispositivos directamente desde AS, además de las opciones de debug, hot reload, etc.

Instalar los plugins es sencillo, dirígete a Preferences>Plugin (en Mac) y a File>Settings>Plugins (en Linux). Selecciona Browse repositories… Busca el plugin ‘Dart’, instálalo, busca ‘Flutter’ e instálalo también, será necesario reiniciar el IDE para que surtan efecto los cambios.

Configurar las plataformas

Para poder trabajar con Android necesitarás tener instalado el SDK de Android y definir la variable de sistema ANDROID_PATH con la localización del SDK. (NOTA: Para ahorrar tiempo puedes instalar directamente Android Studio que te instala a su vez el SDK y lo deja configurado)

Y para trabajar con IOS, será necesario tener instalado Xcode 7.2 o superior. Además necesitarás una herramienta adicional para poder hacer deploy sobre dispositivos físicos de Apple, ésta se instala vía Homebrew.

$ brew tap flutter/flutter
$ brew install ideviceinstaller ios-deploy

Y ahora empieza lo bueno!

Es el momento de crear tu primer proyecto con Flutter, puedes generar un proyecto usando el comando ‘create’:

$ flutter create example-app

Creará una carpeta con el proyecto base en la ruta donde te encuentres:

En AS dirígete a File>Open… y selecciona la carpeta del proyecto recién creado. Al cargar el proyecto verás una estructura similar a esta:

Los archivos que nos importan aquí son los que se encuentran dentro de la carpeta lib/ , que corresponden a los archivos de la aplicación.

Por otra parte está pubspec.yaml archivo el cual contiene las dependencias del proyecto y sus configuraciones. (De este archivo hablaremos más adelante)

Abre el archivo main.dart y borra todo su contenido.

Dart comienza su ejecución en la función main situada en el archivo main.dart, así que será lo primero que habrá que definir:

void main() { 
   
  // Logic here <3
}

Ahora toca importar la librería de Widgets de Flutter que nos proporciona la función que inicializará la aplicación:

import 'package:flutter/widgets.dart';

Ahora puedes llamar a la función runApp y pasarle un Widget como parámetro.

Le hemos pasado a la función un Widget, que tiene como hijo un Texto… muy bien muy bien. ¿Pero qué es un Widget? Los Widgets en Flutter tienen la función de describir una vista, lo que correspondería a una View en Android o IOS. Estos tienen una configuración y unos estados, estados los cuales al cambiar reconstruyen la descripción de dicha vista.

La idea central de Flutter es construir una UI a base de Widgets.

En el caso anterior estás llamando a la función runApp a la cual le pasamos como parámetro el widget Center (el cual centra al hijo que contenga en pantalla) y le pasamos como hijo un widget de texto.

Es el momento de probar la aplicación en un dispositivo

Yo suelo usar el emulador de IOS porque va bastante bien frente al de Android, para abrirlo basta con:

$ open -a Simulator

NOTA: El emulador debe estar usando un dispositivo basado en 64-bits, es decir, iPhone 5S o superior. Puedes seleccionar eso en Hardware > Device.

Y este será el resultado en el emulador de Iphone 7:

CONCLUSIÓN

Hemos visto como crear una app que muestra un texto centrado en pantalla en muy pocas líneas frente a lo que ocuparía esto en una app nativa de Android, en la que tendría que crear un layout.xml y algunas líneas más de código.

En los próximos posts veremos más detenidamente los Widgets que pone a nuestra disposición Flutter para el diseño de interfaces de usuario.