Desarrollo de una aplicación de prueba Hola Mundo con Flutter para múltiples dispositivos: Android, Windows, Web, con el IDE Visual Studio Code.

• Descarga e instalación de Flutter SDK.
• Configurar Visual Studio Code para desarrollo de aplicaciones Flutter y creación de app Hola Mundo.
• Ejecutar app Flutter en dispositivo emulador Android.
• Ejecutar app Flutter en Windows (.exe).
• Ejecutar app Flutter en Web.
• Algunos comandos Flutter.

Descarga e instalación de Flutter SDK

Descargaremos el SDK de Flutter desde su web oficial:

• https://docs.flutter.dev/install/manual

Descargaremos el archivo de la sección Download the Flutter SDK bundle, descomprimiremos el archivo flutter_windows_3.41.4-stable.zip (o la última versión disponible) en una carpeta de nuestro equipo:

Abriremos las Variables de entorno del sistema:

En la pestaña «Opciones avanzadas», pulsaremos en «Variables de entorno»:

Si queremos que Flutter esté disponible para todos los usuarios del equipo elegiremos la variable Path de «Variables del sistema», si queremos que esté disponible solo para el usuario actual elegiremos la variabla Path de «Variables de usuario para …». Seleccionaremos la variable «Path» (que normalmente estará ya creada) y pulsaremos en «Editar»:

Añadiremos una línea al final con la ruta donde hayamos descomprimido el SDK de Flutter y a la subcarpeta bin, en este caso:

C:\flutter\bin

Aceptaremos todos los cambios:

Si hemos agregado correctamente la ruta de Flutter a la variable de entorno Path, abriendo una ventana de MS-DOS (símbolo de sistema o cmd) e introduciendo el siguiente comando:

Nos devolverá:

Configurar dispositivo virtual Android para depuración

Para poder ejecutar la aplicación Flutter en un dispositivo virtual, es recomendable instalar Android Studio (se pueden instalar únicamente las opciones de Android SDK), que incluye los dispositivos virtuales. Una vez instalado Android Studio, desde el menú «Tools» – «SDK Manager»:

Marcaremos para instalar:

• Android SDK Command-line Tools (latest).
• Android SDK Platform-Tools.
• Android SDK Build-Tools (la versión más reciente).

Instalaremos estos paquetes:

Y añadiremos los dispositivos virtuales que deseemos para usarlos posteriormente para ejecutar nuestra app en modo depuración. Lo ideal es añadir, al menos, un dispositivo smartphone y un dispositivo tablet. Para agregar dispositivos, desde la ventana de Device Manager, pulsaremos en «Add new device», pulsaremos en «Create Virtual Device»:

Elegiremos el tipo de dispositivo (Phone, Tablet, Wear OS, Desktop, TV, Automotive) y el modelo, por ejemplo, Phone y Pixel 9:

Si la imagen que queremos usar aún no está descargada, nos lo indicará con el mensaje:

A system image must be selected to continue.

Por lo que pulsaremos en la descarga de la imagen:

Se realizará la descarga de la imagen elegida:

Continuaremos pulsando en «Next»:

Indicaremos los datos del nuevo dispositivo virtual y pulsaremos «Finish»:

Desde Android Studio, es recomendable comprobar que el dispositivo virtual arranca correctamente, para ello, pulsaremos en el Start del dispositivo:

Se iniciará el dispositivo virtual Android, preparado para instalar nuestras aplicaciones para depuración:

Configurar Visual Studio Code para desarrollo de aplicaciones Flutter y creación de app Hola Mundo

Desde VSCode, añadiremos la extensión «Flutter»:

Desde una terminal de VSCode, ejecutaremos el siguiente comando para comprobar que tenemos acceso a los dispositivos virtuales Android y que el entorno flutter está correcto:

En caso de detectar algún problema de configuración nos lo mostrará. Por ejemplo, en este caso, nos indica que no están instalados los cmdline-tools:

Desde VSCode, en nuestro primer proyecto Flutter, en una nueva carpeta o espacio de trabajo, podemos crearlo, abriendo la ventana de terminal (pulsando Control + ñ):

Para crear la app Flutter, usaremos el comando:

Se crearán los ficheros básicos para el desarrollo de nuestra primera app «Hola Mundo» en Flutter:

El comando anterior creará toda la estructura básica necesaria para la ejecución de una app Flutter básica (con un botón para incrementar de ejemplo):

Ejecutar app Flutter en dispositivo emulador Android

Una vez que tengamos la app desarrollada y lista para ejecutar (como hemos visto anteriormente), podremos compilarla y abrirla en el dispositivo virtual Android. Para ello, abriremos el dispositivo virtual «vinculándolo» a nuestro proyecto, pulsando las teclas Control + Mayúsculas + P, en el menú, buscaremos «Flutter: Launch Emulator» y lo pulsaremos:

Nos mostrará todos los dispositivos virtuales que hayamos creado en Device Manager de Android Studio, elegiremos el que queramos usar:

Se iniciará el dispositivo Android, que quedará vinculado a nuestro IDE de desarrollo VSCode:

En este momento, únicamente quedaría compilar la app para que genere el apk, lo instale y la ejecute en el dispositivo Android virtual. Para ello, en VSCode, en la terminal (Control + ñ), ejecutaremos el comando:

Como tenemos el dispositivo Android vinculado, directamente se generará el apk en modo debug y se instalará en el dispositivo. En caso de no tener dispositivo vinculado, se mostraría menú para elegir en qué dispositivo queremos ejecutar la app (lo veremos más adelante).

Si no hay errores, la app se abrirá en el dispositivo Android virtual:

Con la gran ventaja, para depurar, de que la consola de debug queda vinculada al dispositivo y podemos mostrar resultados y ver qué se ejecuta y el resutado:

Flutter permite, incluso, realizar cambios en el código y, para aplicarlos en la app abierta del dispositivo virtual, sin tener que reinstalarla, hacer un hot reload, pulsando la tecla «r» en la terminal:

Por supuesto, si queremos probar la app Flutter en un dispositivo Android real/físico, será suficiente con ejecutar el siguiente comando, desde la terminal de VSCode (Control +ñ):

El comando anterior generará el .apk que podremos instalar en cualquier dispositivo Android compatible con el nivel de API (evidentemente) que estemos usando, en la carpeta:

…\Flutter\HolaMundoProyectoA\holamundoproyectoa\build\app\outputs\apk\release

Enviaremos el fichero app-release.apk al dispositivo, por ejemplo desde Telegram, lo descargaremos y ejecutaremos:

Pulsaremos en «Instalar»:

Como se trata de un origen diferente a Google Play, el sistema de protección de Android, nos mostrará un mensaje indicando que se está intentando instalar una app desde una fuente no conocida, pulsaremos en «Instalar sin analizar»:

Una vez instalada, pulsaremos en «Abrir»:

Y se ejecutará nuestra app Hola Mundo en el dispositivo Android real:

Ejecutar app Flutter en Windows (.exe)

Dado que Flutter es un entorno de desarrollo multiplataforma, con sencillos comandos podremos ejecutar nuestra app, con el mismo código fuente, en Web, Windows, Android, Linux, MAC e iOS/iPhone. Si estamos trabajando en Windows con VSCode, podremos ejecutar nuestra app en el propio Windows, en Web y en dispositivos virtuales Android (como hemos indicado anteriormente). Para ejecutar la app en Windows, desde la terminal (Control + ñ) de VSCode, comprobaremos los dispositivos disponibles para la ejecución de nuestra app Flutter, con el comando:

Como podemos comprobar, tenemos disponibles los siguientes dispositivos para ejecutar nuestra app Flutter: el emulador Android creado anteriormente, Windows, Chrome y Edge. Como tenemos Windows como dispositivo, para ejecutar la app en modo depuración en Windows, ejecutaremos el comando:

Flutter generará todo lo necesario (.exe, dll, etc.) para ejecutar la app en Windows. Además, al igual que para emulador Android, tendremos posibilidad de hacer un hot reload (r), un hot restar (R) o un quit (q):

La app quedará abierta en Windows, como una aplicación normal de Windows:

Por supuesto, cuando queramos generar la app para ejecutar en modo release (definitiva para producción), podemos usar el siguiente comando:

Este comando generará el .exe y las dll necesarias para la ejecución de la aplicación en cualquier equipo Windows, en la carpeta:

…\HolaMundoProyectoA\holamundoproyectoa\build\windows\x64\runner\Release

Ejecutar app Fluter en Web

Al igual que en Android o Windows, para ejecutar en web nuestra app Flutter, será tan sencillo como ejecutar el comando:

Como siempre, Flutter generará todo lo necesario para que la app se ejecute en entorno Web, iniciando un servicio web por el puerto 59997:

También podremos generar los ficheros necesarios para que nuestra App funcione en entorno web (subiéndolos a un servidor web):

En la carpeta:

…\HolaMundoProyectoA\holamundoproyectoa\build\web

Algunos comandos Flutter

Os mostramos alguns comandos Flutter útiles, con su función:

Comando	Función / Descripción
flutter run	Ejecuta la app en el dispositivo o emulador detectado automáticamente.
flutter run -d chrome	Ejecuta la app específicamente en el navegador Chrome (para Web).
flutter run -d windows	Ejecuta la app como una aplicación de escritorio en Windows.
flutter run --debug	Ejecuta la app en modo debug (por defecto, igual que flutter run).
flutter run --profile	Ejecuta la app en modo perfil, útil para medir rendimiento.
flutter run --release	Ejecuta la app en modo release (máxima optimización, sin herramientas de debug).
dart run dmg	Crea un instalador .dmg firmado y notarizado para macOS (requiere el paquete dmg como dev-dependency).
dart run msix:create	Genera un instalador .msix moderno para Windows (requiere el paquete msix como dev-dependency).
flutter build apk --release	Genera el archivo .apk para distribuir la app en Android.
flutter build appbundle --release	Genera el archivo .aab para publicar en Google Play Store.
flutter build ipa --release	Genera un archivo .ipa para la App Store (solo en macOS).
flutter build web --release	Genera los archivos HTML, CSS y JS estáticos para desplegar la web.
flutter build linux --release	Compila la app como un paquete ejecutable para Linux.
flutter pub run distribute_cli publish playstore	Sube el archivo .aab a la consola de Google Play (requiere configuración previa).
flutter pub run distribute_cli publish appstore	Sube el archivo .ipa a App Store Connect (requiere configuración previa).
flutter clean	Elimina las carpetas build/ y .dart_tool/. Limpia cachés de compilación.
flutter pub cache clean	Borra la caché global de paquetes Dart/Flutter.
flutter devices	Muestra una lista de todos los dispositivos conectados o emuladores disponibles.
flutter emulators	Lista todos los emuladores Android disponibles.
flutter emulators --launch <id>	Inicia un emulador específico usando su ID.
flutter doctor -v	Verifica que todas las dependencias estén instaladas correctamente, mostrando información detallada.
flutter pub get	Descarga las dependencias listadas en tu archivo pubspec.yaml.
flutter pub outdated	Muestra las dependencias del proyecto que tienen versiones más recientes disponibles.
flutter pub upgrade	Actualiza todas las dependencias a la última versión permitida por pubspec.yaml.
flutter channel stable	Cambia al canal estable de Flutter (otros canales: beta, dev, master).
flutter upgrade	Actualiza tu SDK de Flutter a la última versión del canal actual.
Comandos de Depuración (Debug)
flutter attach	Conecta la herramienta de debug a una app Flutter que ya está ejecutándose.
flutter test	Ejecuta todas las pruebas unitarias y de widgets en la carpeta test/.
flutter test --coverage	Ejecuta las pruebas y genera un informe de cobertura de código.
flutter run --verbose	Ejecuta la app mostrando logs detallados de todo el proceso.
flutter logs	Muestra los logs en tiempo real del dispositivo conectado (incluye print() y errores).
flutter analyze	Analiza el código del proyecto en busca de errores y advertencias de estilo.
dart format .	Formatea automáticamente todo el código Dart del proyecto según las guías oficiales.
flutter run --trace-startup	Ejecuta la app y registra el tiempo de inicio detallado.
flutter run --dart-define=MY_VAR=value	Pasa variables de entorno personalizadas al momento de ejecutar la app.
flutter run --verbose-system-ui	Muestra información detallada del sistema operativo y la interfaz.