latest

Conociendo Flutter. Instalación y configuración en Windows

En la última sesión del curso de Flutter realizamos una descripción técnica de este SDK, destacando su modelo de programación basado en widgets. Ya es hora de volcarnos más en la parte práctica empezando por la instalación del SDK de Flutter. Vamos a seguir la documentación oficial de Flutter para realizar los pasos necesarios para su instalación y configuración en Windows. Aquellos que quieran instalarlo en otro sistemas operativos (macOS o Linux) podéis encontrar las instrucciones aquí.

Una vez instalado el SDK, nosotros vamos a configurar el editor Visual Studio Code que será nuestra herramienta para programar en Flutter. Nada ni nadie os impide usar otra alternativa de las que recomenda Flutter :) como el propio Android Studio o IntelliJ IDEA, probadlos si queréis. Bueno comencemos:

Requisito previo en Windows 10

Como requisito previo en Windows 10 antes de comenzar la instalación de Flutter, debéis tener instalado Git for Windows 2.x con la opción "Use Git from the Windows Command Prompt".

Obtener el SDK de Flutter

  1. Descargad el siguiente paquete de instalación para obtener la última versión estable del Flutter SDK:
    flutter_windows_v1.0.0-stable.zip
  2. Extraed el archivo .zip y colocad la carpeta flutter en la ubicación de instalación deseada para el SDK de Flutter (por ejemplo, C:\src\flutter; no instaléis Flutter en un directorio como C:\Archivos de Programa\ que requiera privilegios elevados).
  3. Localizad el archivo flutter_console.bat dentro de la carpeta de flutter y ejecutadlo.

A través de esta consola podemos ejecutar comandos de Flutter.

Actualizar el path

Pero si quisiéramos correr comandos de Flutter en la consola regular de Windows hay que realizar los pasos siguientes para añadir Flutter a la variable de entorno PATH:

  • Presionad el botón de inicio y escribid env y seleccionad "Editar las variables de entorno del sistema".
  • En Opciones avanzadas/ Variables de entorno comprobad si existe la entrada llamada Path:
    • Si la entrada Path existe en Variables de usuario , añadirle la ruta completa hasta flutter\bin.
    • Si no existe cread la variable de usuario Path y añadirle la ruta completa hasta flutter\bin.

Presionad el botón de inicio y escribid cmd para abrir una nueva consola, desde ella podéis ejecutar el comando de Flutter flutter doctor que nos indicará las dependencias necesarias para completar la correcta instalación del SDK de Flutter. Con los pasos realizados hasta ahora deberíais obtener una salida similar a la siguiente:


Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.0.0, on Microsoft Windows 
[Versión 10.0.17134.590], locale es-ES)
[!] Android toolchain - develop for Android devices 
(Android SDK 28.0.1)
    ! Some Android licenses not accepted.  To resolve 
    this, run: flutter doctor --android-licenses
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Las secciones siguientes describen cómo realizar estas tareas y finalizar el proceso de configuración. Una vez que se hayan instalado las dependencias que faltan, podéis ejecutar de nuevo el comando flutter doctor para verificar que ha configurado todo correctamente.

Instalar Android Studio

Flutter necesita una instalación completa de Android Studio para resolver algunas de sus dependencias de la plataforma móvil Android.

  1. Descargad e instalar Android Studio.
  2. Iniciad Android Studio y seguid las instrucciones del asistente de configuración. Esto instala el último Android SDK, Android SDK Platform-Tools, y Android SDK Build-Tools, que son requeridos por Flutter cuando se desarrolla para Android.

Configurar tu dispositivo Android

Para poder ejecutar y probar vuestras aplicaciones Flutter en un dispositivo móvil Android, necesitaréis un dispositivo Android 4.1 (nivel 16 de la API) o superior.

  1. En el dispositivo móvil, habilitad las opciones de desarrollo y la depuración USB. Aquí podéis encontrar los detalles de cómo configurar las opciones para programadores en el dispositivo.
  2. Sólo para Windows: instalación del controlador USB de Google. En Android Studio desde el SDK Manager como se explica a continuación:
    • Haced clic en Tools > Android > SDK Manager.
    • Haced clic en la pestaña SDK Tools.
    • Seleccionad Google USB Driver package y haced clic en Install.
    • Una vez que finalice el proceso, los archivos del controlador se descargarán en el directorio <sdk>\extras\google\usb_driver\.
  3. Utilizando un cable USB, conectad el teléfono al ordenador. Si lo solicita, autorizad al equipo a tener acceso al dispositivo.
  4. En el terminal, ejecutad el comando Flutter devices para verificar que Flutter reconoce el dispositivo Android conectado.

Configurar el emulador de Android

Para poder ejecutar y probar vuestras aplicaciones Flutter en un emulador Android, debéis seguir los pasos siguientes:

  1. Habilitar la aceleración por HW para el renderizado de gráficos en el emulador.
  2. Iniciad Android Studio > Tools > Android > AVD Manager y seleccionad Create Virtual Device.
  3. Seleccionad una definición de dispositivo y haced click en Siguiente.
  4. Seleccionad una o más imágenes de sistema para las versiones de Android que deseéis emular y haced click en Siguiente. Se recomienda una imagen x86 o x86_64.
  5. En Emulated Performance, seleccionad Hardware - GLES 2.0 para activar la aceleración por hardware.
  6. Verificad que la configuración de la AVD es correcta y Finalizar.
  7. En el AVD Manager, clickear en Run para lanzar el emulador seleccionado.

Instalar VS Code

Nosotros vamos a usar el editor VS Code Open Source de Microsoft dado que nos parece una herramienta de programación excelente. Podéis descargar e instalar la última versión desde aquí.

Instalar los plugins de Flutter y Dart para VS Code

  1. Iniciad VS Code.
  2. Desde View > Command Palette:
    • Escribid install y seleccionad Extensiones: Instalar Extensiones.
    • Escribid flutter en el buscador de extensiones, de la lista desplegada seleccionad Flutter y haced click en Install. Esto también se encargará de instalar el plugin de Dart.

Validar la configuración con Flutter Doctor

  1. Desde VS Code en View > Command Palette
    • Escribid doctor y seleccionad: Flutter: Run Flutter Doctor
    • Todo debe aparecer con un tick de visto bueno, salvo la instalación de plugins de Flutter y Dart para Android Studio, dado que no lo hemos hecho al seleccionar VS Code como nuestra herramienta para programar en Flutter.

Crear un proyecto Flutter inicial

Vamos a crear nuestro primer proyecto en Flutter:

  1. Desde VS Code ir a View > Command Palette.
  2. Escribid flutter y seleccionad Flutter: New Project.
  3. Darle un nombre al proyecto como miaplicacion.
  4. Seleccionar el directorio padre para la carpeta del nuevo proyecto.
  5. Esperar hasta que se genera el código del proyecto y el archivo main.dart está disponible.

Ejecutar nuestra primera aplicación Flutter

  1. Localizad la barra de estado de VS Code en azul en la parte inferior de la ventana y seleccionad el dispositivo con el que se ejecutará la aplicación. Si queremos ejecutarlo en el emulador debemos tenerlo previamente en ejecución. Del mismo modo, si queremos debuguear la aplicación en un dispositivo móvil real debemos tenerlo conectado al ordenador por USB.
  2. Ejecutad Debug > Start Debugginf (o presionad F5).
  3. Esperad que la aplicación se lance (el proceso se demora un poco más la primera vez). Todo el progreso puede seguirse desde la consola de depuración.

Y este es el resultado final:

Con esto damos por finalizada la sesión de Instalación y Configuración de Flutter en Windows.

Author image
Iván González is postdoctoral researcher at the Castilla-La Mancha University.
Ciudad Real (Spain)