Flutter I: Instalación e Introducción

Flutter es una nueva herramienta que nos ofrece Google para poder construir aplicaciones que se puedan ejecutar en distintas plataformas, como Android o iOS, con un solo código base. Hoy día se encuentra en la versión alpha:0.0.20, una versión muy temprana pero que ya nos permite construir interfaces complejas, peticiones a la red e incluso trabajar con ficheros.



Flutter no funciona como otros frameworks multi-plataforma como puede ser Cordova. A diferencia de Cordova, Flutter no se ejecuta sobre un WebView ejecutando HTML, CSS y Javascript. Flutter utiliza solo Dart como lenguaje de programación, un lenguaje bastante sencillo de aprender y si es el caso y sabes Java puedes aprender el ~75% de Dart en uno o dos días.

Pero nuestra app no ejecutará el código en Dart sino que cuando compilamos nuestra app en modo release se compila a código nativo por lo que obtenemos un mayor rendimiento y una mejor respuesta de la interfaz de usuario. Si estamos en modo debug para poder comprobar posibles errores en la fase de desarrollo Flutter realiza varias comprobaciones, comprobaciones que pueden hacer que la app pueda ir un poco más lenta. Si estamos en esta situación Flutter nos lo indica con una cinta en la esquina superior derecha de nuestra app con el texto “Slow Mode”.

Flutter Slow mode ribbon

¿Por qué aprender/usar Flutter?

Flutter no solo nos permite crear apps para Android e iOS con un solo proyecto sino que además se necesita muy poco código para realizar cosas en comparación si la hiciéramos en nativo en Android o iOS. Otra ventaja es que está orientado a Material Design ofreciéndonos muchas de las sus especificaciones.

Flutter Gallery Demo

Incluso Google está utilizando Flutter para crear el System UI de su nuevo sistema operativo Fuchsia, como podemos ver en su propio repo.

Instalación

El hecho que Flutter este en un estado temprano puede hacer que en el futuro la siguiente forma de instalarlo puede variar, para mantenerte al día puedes encontrar en su página la forma más actualizada de hacer la instalación en inglés.

De todos modos asumimos para este y los siguientes tutoriales la versión 0.0.20+.alpha por lo cual la instalación actual es la siguiente.

Paso 1. Clonar Flutter

Clonamos con git o alguna herramienta(SourceTree, Github Desktop…) la rama alpha de Flutter, y añadimos al PATH la carpeta bin:

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

Paso 2. Dependencias

Ejecutar flutter doctor para instalar el resto de dependencias.

$ flutter doctor

Paso 3. Plataformas

El siguiente paso es instalar las plataformas para las que quieras desarrollar, cada plataforma es opcional no necesitamos instalar ambas si solo queremos probar por ejemplo en Android.

En el caso de Android debes instalar su SDK o instalar el Android Studio que ya nos proporciona el SDK, en caso de instalar el Android Studio en una localización distinta a la de por defecto deberás añadir al path la variable ANDROID_HOME apuntando a donde está el SDK de Android.

En iOS necesitamos instalar la version de xcode 7.2 o superior, y para instalar las app en un dispositivo físico necesitamos instalar una herramienta adicional con Homebrew . Primeros instalamos Homebrew y luego la herramienta:

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

Paso 4. Atom

El modo recomendado de desarrollar en Flutter en utilizar el editor Atom y los plugins de Dart y Flutter. El editor atom lo puedes descargar de aquí. Una vez instalado lo abrimos y…

Instalamos el paquete de Flutter:

  • Vamos a Packages > Settings View > Install Packages/Themes.
  • En el campo Install Packages, ponemos flutter y hacemos click en el botón Packages.
  • En este punto deberías ver el paquete de Flutter y la opción para instalarlo.

Abrimos Packages > Flutter > Package Settings para poder añadir la dirección en donde tengas clonado el SDK de Flutter en el campo FLUTTER_ROOT.

Entonces en Packages > Dart > Package Settings, hacemos lo mismo con el sdk de Dart que debe estar dentro de la carpeta donde tengas clonado Flutter concretamente en bin/cache/dart-sdk.

Si usas Mac debes ir a Atom > Install Shell Commnads para instalar el shell commands

Por último, ejecutamos otra vez el flutter doctor para comprobar que todo haya ido bien. Este por ejemplo es la salida tras hacer un flutter doctor, como podemos ver todo esta bien salvo que no tenemos lo necesario para probar en iOS.

[✓] Flutter (on Mac OS, channel alpha)
   • Flutter at /Users/XensS/dev-dart/flutter-sdk
   • Framework revision 9a0a0d9903 (5 days ago), engine revision f8d80c4617
[✓] Android toolchain — develop for Android devices (Android SDK 24.0.1)
   • Android SDK at /Users/XensS/Library/Android/sdk
   • Platform android-N, build-tools 24.0.1
   • Java(TM) SE Runtime Environment (build 1.8.0_25-b17)
[✓] iOS toolchain — develop for iOS devices (Xcode 6.4)
   • XCode at /Applications/Xcode.app/Contents/Developer
   • Xcode 6.4, Build version 6E35b
   x Flutter requires a minimum XCode version of 7.0.0.
     Download the latest version or update via the Mac App Store.
   x ideviceinstaller not available; this is used to discover connected iOS devices.
     Install via ‘brew install ideviceinstaller’.
   x ios-deploy not available; this is used to deploy to connected iOS devices.
     Install via ‘brew install ios-deploy’.
[✓] Atom — a lightweight development environment for Flutter
   • flutter plugin version 0.2.4
   • dartlang plugin version 0.6.37

Primeros Pasos (App, ¡Hola Mundo!)

Veamos ahora cómo crear un nuevo proyecto y algunos ejemplos sencillos de cómo funciona Flutter, en los sucesivos post iremos viendo cosas más complejas.

Para crear un proyecto vamos Packages > Flutter > create new Flutter Project. Al crear el proyecto nos crea un archivo dentro de la carpeta lib llamado main.dart, lo abrimos y para empezar borramos todo su contenido.

En Dart el código se inicia desde una función llamada main la cual debemos crear dentro de este archivo main.dart

void main() { }

Ahora necesitamos importar la librería material de dart que nos proporciona una función para lanzar una app.

import ‘package:flutter/material.dart’;

Esta función se llama runApp y debemos pasarle un widget, un widget para hacernos una idea es parecido a un View en Android o en iOS con algunos detalles que lo diferencian. En Flutter toda la parte de UI se construyen a base de Widgets y se hace todo en Dart y no como en android que las vistas las declaramos mayormente en un xml.

Para un primer ejemplo podemos utilizar el widget Text que es el que debemos utilizar si queremos mostrar texto en una app.

Ahora podremos ejecutar la app, en la barra superior de Atom podemos ver cómo lanzar la app.

Flutter Run

Al lanzar la app obtenemos este resultado, como vemos el texto se pone justo donde está el status bar porqué es donde una app en Flutter tiene su punto [0, 0]

Por ejemplo, añadamos un poco de padding a la parte superior de nuestro texto para que no se vea encima del status bar. Como hemos comentado la UI en Flutter se hace mediante widgets y el padding es otro widget. Esto es posible que os llame la atención si estáis acostumbrados a Android o a iOS en donde el padding es un atributo más de una vista. En Flutter no es así, en Flutter lo que tenemos que hacer para añadir un padding a un widget es poner dentro de un widget Padding nuestro widget, en nuestro ejemplo quedaría de la siguiente forma.

Hemos creado un widget Padding, este tiene un atributo padding al cual le pasamos un EdgeInsets con un valor para el el padding top de 24 y como hijo del padding le hemos puesto nuestro texto, si lo ejecutamos veremos como ahora nuestro texto aparece más abajo.

Nota: Si vienes de Java aunque no lo parezca esta instrucción const EdgeInsets.only(top: 24.0) es la llamada a un constructor de EdgeInsets llamado only y devuelve una instancia que es una constante en tiempo de compilación. Esta en una diferencia de Dart con respecto a Java, aquí puedes encontrar más información acerca de constructores en Dart

Si quisiéramos centrar el texto en la pantalla tenemos al igual que el padding un widget específico, Center.

Si os habéis fijado existe una similitud entre el Center y el Padding y es que ambos tiene el child, esto es una de las cosas que hace tan potente a Flutter. Cada widget tiene su propio child que nos permite encadenar widgets, por ejemplo, tener un Text dentro de un Padding dentro de un Center.

Conclusión

En este primer post sobre Flutter hemos visto lo fácil que es crear una app y mostrar un texto apenas con unas pocas líneas de código. En los sucesivos posts sobre Flutter iremos aumentando la complejidad de nuestras interfaces y en donde podréis comprobar lo simple comparado con Android o iOs que son implementarlas.