¿Como convertir una app Flutter en una Windows App?

¡Hoy es el gran día! Sergio y sus compañeros han cerrado completamente el backlog y se preparan para distribuir la aplicación desarrollada en Flutter en la que llevan meses trabajando.

Ha sido un final de sprint bastante complicado, varios bugs por resolver, prisas, incertidumbre… Pero finalmente han conseguido sacar adelante la aplicación y están a punto de entregarla al cliente.

A primera hora de la mañana el equipo empaquetó la aplicación y se preparó para enviarla pero, un correo sacudió los nervios de todos. La aplicación que el cliente pedía debería poder ejecutarse desde el escritorio de Windows también.

El equipo concretó una reunión de urgencia y acordó investigar como hacerlo de la manera mas rápida y eficiente posible. Dicho y hecho se pusieron manos a la obra y encontraron información muy valiosa.

¿Qué debemos tener en cuenta?

Antes de ponerse en faena, el equipo tuvo que cerciorarse sobre que todo estuviera listo para poder generar el ejecutable. Antes de empezar debían tener instalado lo siguiente:

• Flutter SDK: Lo descargaron desde la página oficial de Flutter
• Visual Studio Code: Además de tenerlo instalado, necesitaban instalar dos extensiones:
  • Flutter
  • Dart
• Visual Studio: Versión de 2019 o superior con herramientas para desarrollar apps de escritorio, como estos componentes:
  • C++ Desktop Development
  • MSVC v143 – VS 2022 C++ x64/x86 build tools (latest)
  • Windows 10 SDK (latest)

¡Empezamos a preparar todo!

Una vez comprobaron que todo estaba en orden, el equipo empezó a trabajar en preparar el proyecto para poder crear el ejecutable. Se dieron cuenta de que antes de nada, necesitaban ejecutar varios comandos:

• flutter channel stable: Cambia el canal de actualización de Flutter al canal estable, el mas seguro y recomendado para producción.
• flutter upgrade: Actualiza Flutter a la última versión disponible en el canal en el que estás. Descarga las actualizaciones recientes y sus dependencias.
• flutter config –enable-windows-desktop: Habilita el desarrollo de apps de escritorio para windows en el entorno de Flutter. Necesario para compilar y ejecutar.

Una vez ejecutados los comandos, el equipo ejecutó el comando:

• flutter doctor

Este comando verifica que está todo correctamente instalado y configurado.

Al contar con la sección «Visual Studio – develop Windows  apps», aseguraron que el entorno estaba ya completamente configurado

Compilamos la aplicación

Con todo el entorno listo para dar el siguiente paso, el equipo se sentía seguro para ejecutar el comando de compilación de la aplicación para Windows.

• flutter build windows

¡La compilación había sido un éxito! Entre los vítores de felicitación llegó la parte en la que por fin podrían comprobar que todo había ido bien. Tenían que ejecutar la aplicación generada en la build.

Entraron en la carpeta:

• build\windows\x64\runner\Release

Y ejecutaron el comando que lanzaría la aplicación generada:

• flutter run -d windows

Una vez mas, ¡Todo fue perfecto! La aplicación se levantó correctamente y pudieron ejecutarla en Windows. Ahora, llegaba la última parte. Distribuir la aplicación al cliente para que pudiera probarla.

Creación de fichero de instalación

Para realizar esta acción el equipo instaló la aplicación:

• InnoSetup: Esta herramienta sirve para crear instaladores de software en Windows. Empaqueta aplicaciones en un único archivo de instalación que los usuarios pueden ejecutar para instalar el software.

Una vez instalado, se copió el contenido de la carpeta Release antes mencionada a una nueva carpeta. Dentro de dicha carpeta están estos ficheros:

Se creó un script de instalación dentro de InnoSetup:

En este script podemos observar varios campos que se han rellenado:

Setup:

• • AppName: Nombre de la aplicación que aparecerá en el instalador
  • AppVersion: Versión de la aplicación
  • DefaultDirName: Directorio predeterminado donde se instalará la app en el sistema.
  • DefaultGroupName: Nombre del grupo de programas en el menú de inicio para la aplicación.
  • OutputBaseFilename: Nombre base del archivo de instalación generado (no incluir extensión)
  • Compression: Metodo de compresión para reducir el tamaño del instalador (LZMA es el mas eficiente)
  • SolidCompression: Activa la compresión sólida, mejora la tasa de compresión al agrupar archivos similares

Files:

• • Source «»; DestDir: «{app}»; Flags: ignoreversion: Incluye el archivo ejecutable principal en el directorio de la aplicación. Ignoreversion permite reemplazar versiones anteriores sin verificar la versión del archivo.
  • Source «»; DestDir: » {app}»; Flags: ignoreversion recursesubdirs  createallsubdirs: Incluye todos los archivos en la carpeta Release.
    • recursesubdirs: Asegura que los archivos en subdirectorios tambien se incluyan.
    • createallsubdirs: Crea todos los subdirectorios necesarios

Icons:

• • Name: «{group}\LibroFirmas»; Filename:  «{app}\LibroFirmas.exe»: Crea un acceso directo en el menu de inicio bajo el grupo especificado, apuntando al archivo ejecutable.
  • Name: «{commondesktop}\LibroFirmas»; Filename: «{app}\LibroFirmas.exe»: Crea un acceso directo en el escritorio apuntando al archivo ejecutable.

Run:

• • Filename: «{app}\LibroFirmas.exe»; Description: «Lanzar LibroFirmas»; Flags: nowait postinstall skipifsilent: Ejecuta la aplicación inmediatamente tras la instalación
    • nowait: El instalador no esperará a que la app termine de ejecutarse.
    • postinstall: Indica que se debe ejecutar despues de que el instalador haya completado su tarea.
    • skipifsilent: Evita ejecutar la app en modo silencioso (sin interfaz de usuario)

Dentro del script se ejecutó la acción haciendo click en «Compile». Esto creará en el directorio con el instalador donde pegaron la carpeta «Release» una nueva carpeta «Output», donde estará al fin el fichero de instalación.

El equipo ejecutó el instalador y la pantalla de instalación apareció. Habían terminado la instalación, ¡y habían llegado a tiempo para la entrega!

Finalmente entregaron al cliente el ejecutable y celebraron el éxito, ya que gracias a su trabajo en equipo, todo esto había sido posible.