Construir aplicaciones de Windows con Flutter

Esta página analiza consideraciones únicas para la construcción de aplicaciones para Windows con Flutter, incluyendo la integración con el shell y la distribución de aplicaciones para Windows a través de la Microsoft Store en Windows.

La interfaz de programación de Windows combina APIs Win32 tradicionales, interfaces COM y librerías de Windows Runtime más modernas. Como todas estas proporcionan una ABI basada en C, puedes llamar a los servicios provistos por el sistema operativo usando la librería de interfaz de funciones extranjeras de Dart (dart:ffi). FFI está diseñada para permitir que los programas de Dart llamen de manera eficiente a librerías de C. Proporciona a las aplicaciones de Flutter la capacidad de asignar memoria nativa con malloc o calloc, soporte para punteros, estructuras (structs) y devoluciones de llamada (callbacks), y tipos de ABI como long y size_t.

Para más información sobre cómo llamar a librerías de C desde Flutter, consulta Interoperabilidad de C usando dart:ffi. Para empaquetar y vincular tu propio código nativo de C o C++ con tu aplicación, consulta Vincular a código nativo usando FFI.

En la práctica, aunque es relativamente sencillo llamar a las APIs básicas de Win32 desde Dart de esta manera, es más fácil usar una librería contenedora que abstraiga las complejidades del modelo de programación COM. El paquete win32 proporciona una librería para acceder a miles de APIs comunes de Windows, utilizando metadatos provistos por Microsoft para mayor consistencia y corrección. El paquete también incluye ejemplos de una variedad de casos de uso comunes, como WMI, gestión de discos, integración con el shell y diálogos del sistema.

Varios otros paquetes se basan en esta base, proporcionando acceso idiomático en Dart para el registro de Windows, soporte para gamepad, almacenamiento biométrico, integración con la barra de tareas y acceso a puertos serie, por nombrar algunos.

De manera más general, muchos otros paquetes soportan Windows, incluyendo paquetes comunes como url_launcher, shared_preferences, file_selector y path_provider.

Aunque puedes usar cualquier estilo visual o tema que elijas, incluyendo Material, algunos autores de aplicaciones podrían desear construir una aplicación que coincida con las convenciones del sistema de diseño Fluent de Microsoft. El paquete fluent_ui, un Flutter Favorite, proporciona soporte para elementos visuales y controles comunes que se encuentran habitualmente en aplicaciones modernas de Windows, incluyendo vistas de navegación, diálogos de contenido, flyouts, selectores de fecha y widgets de vista de árbol.

Además, Microsoft ofrece fluentui_system_icons, un paquete que proporciona un acceso fácil a miles de iconos de Fluent para usar en tu aplicación de Flutter.

Por último, el paquete bitsdojo_window proporciona soporte para barras de título "dibujadas por el propietario" (owner draw), lo que te permite reemplazar la barra de título estándar de Windows con una personalizada que coincida con el resto de tu aplicación.

Cuando creas una aplicación para Windows, Flutter genera una pequeña aplicación en C++ que aloja a Flutter. Esta "aplicación runner" es responsable de crear y redimensionar una ventana Win32 tradicional, inicializar el motor de Flutter y cualquier plugin nativo, y ejecutar el bucle de mensajes de Windows (pasando los mensajes relevantes a Flutter para su posterior procesamiento).

Por supuesto, puedes realizar cambios en este código para adaptarlo a tus necesidades, incluyendo la modificación del nombre y el icono de la aplicación, y la configuración del tamaño y la ubicación iniciales de la ventana. El código relevante está en main.cpp, donde encontrarás un código similar al siguiente:

Win32Window::Point origin(10, 10);
Win32Window::Size size(1280, 720);
if (!window.CreateAndShow(L"myapp", origin, size))
{
    return EXIT_FAILURE;
}

Reemplaza myapp con el título que te gustaría que se muestre en la barra de título de Windows, así como opcionalmente ajustar las dimensiones del tamaño y las coordenadas de la ventana.

Para cambiar el icono de la aplicación de Windows, reemplaza el archivo app_icon.ico en el directorio windows\runner\resources con un icono de tu preferencia.

El nombre del archivo ejecutable de Windows generado se puede cambiar editando la variable BINARY_NAME en windows/CMakeLists.txt:

cmake_minimum_required(VERSION 3.14)
project(windows_desktop_app LANGUAGES CXX)

# The name of the executable created for the application.
# Change this to change the on-disk name of your application.
set(BINARY_NAME "YourNewApp")

cmake_policy(SET CMP0063 NEW)

Cuando ejecutas flutter build windows, el archivo ejecutable generado en el directorio build\windows\runner\Release coincidirá con el nombre recién asignado.

Finalmente, se pueden encontrar propiedades adicionales para el propio ejecutable de la aplicación en el archivo Runner.rc en el directorio windows\runner. Aquí puedes cambiar la información de derechos de autor y la versión de la aplicación que está incrustada en la aplicación de Windows, la cual se muestra en el cuadro de diálogo de propiedades del Explorador de Windows. Para cambiar el número de versión, edita las propiedades VERSION_AS_NUMBER y VERSION_AS_STRING; otra información se puede editar en el bloque StringFileInfo.

Para la mayoría de las aplicaciones, es suficiente con permitir que Flutter maneje el proceso de compilación utilizando los comandos flutter run y flutter build. Si estás realizando cambios significativos en la aplicación runner o integrando Flutter en una aplicación existente, es posible que desees cargar o compilar la aplicación de Flutter en el propio Visual Studio.

Sigue estos pasos:

1. Ejecuta flutter build windows para crear el directorio build\.

2. Abre el archivo de solución de Visual Studio para el runner de Windows, que ahora se puede encontrar en el directorio build\windows, nombrado de acuerdo con la aplicación de Flutter principal.

3. En el Explorador de soluciones, verás varios proyectos. Haz clic derecho en el que tiene el mismo nombre que la aplicación de Flutter, y elige Establecer como proyecto de inicio.

4. Para generar las dependencias necesarias, ejecuta Compilar > Compilar solución

   También puedes presionar Ctrl + Shift + B.

   Para ejecutar la aplicación de Windows desde Visual Studio, ve a Depurar > Iniciar depuración.

   También puedes presionar F5.

5. Usa la barra de herramientas para cambiar entre las configuraciones de Debug y Release según corresponda.

Existen varios enfoques que puedes usar para distribuir tu aplicación de Windows. Aquí tienes algunas opciones:

• Usa herramientas para construir un instalador MSIX (descrito en la siguiente sección) para tu aplicación y distribúyela a través de la Tienda de aplicaciones de Microsoft Windows. No necesitas crear manualmente un certificado de firma para esta opción, ya que se gestiona por ti.
• Construye un instalador MSIX y distribúyelo a través de tu propio sitio web. Para esta opción, debes darle a tu aplicación una firma digital en forma de un certificado .pfx.
• Reúne todas las piezas necesarias y construye tu propio archivo zip.

MSIX, el nuevo formato de paquete de aplicaciones de Windows, proporciona un formato de empaquetado e instalador moderno. Este formato se puede usar tanto para enviar aplicaciones a la Microsoft Store en Windows como para distribuir instaladores de aplicaciones directamente.

La forma más fácil de crear una distribución MSIX para un proyecto de Flutter es usar el paquete de pub msix. Para ver un ejemplo del uso del paquete msix desde una aplicación de escritorio de Flutter, consulta la muestra Desktop Photo Search.

Para el despliegue privado y las pruebas con la ayuda del instalador MSIX, debes darle a tu aplicación una firma digital en forma de un certificado .pfx.

Para el despliegue a través de la Tienda Windows, no es necesario generar un certificado .pfx. La Tienda Windows se encarga de la creación y gestión de certificados para las aplicaciones distribuidas a través de su tienda.

Distribuir tu aplicación alojándola en tu propio sitio web requiere un certificado firmado por una Autoridad de Certificación conocida por Windows.

Usa las siguientes instrucciones para generar un certificado .pfx autofirmado.

1. Si aún no lo has hecho, descarga el conjunto de herramientas OpenSSL para generar tus certificados.
2. Ve a donde instalaste OpenSSL, por ejemplo, C:\Program Files\OpenSSL-Win64\bin.
3. Configura una variable de entorno para que puedas acceder a OpenSSL desde cualquier lugar:
   "C:\Program Files\OpenSSL-Win64\bin"
4. Genera una clave privada de la siguiente manera:
   openssl genrsa -out mykeyname.key 2048
5. Genera un archivo de solicitud de firma de certificado (CSR) usando la clave privada:
   openssl req -new -key mykeyname.key -out mycsrname.csr
6. Genera el archivo de certificado firmado (CRT) usando la clave privada y el archivo CSR:
   openssl x509 -in mycsrname.csr -out mycrtname.crt -req -signkey mykeyname.key -days 10000
7. Genera el archivo .pfx usando la clave privada y el archivo CRT:
   openssl pkcs12 -export -out CERTIFICATE.pfx -inkey mykeyname.key -in mycrtname.crt
8. Instala el certificado .pfx primero en la máquina local en el Almacén de certificados como Entidades de certificación raíz de confianza antes de instalar la aplicación.

El ejecutable de Flutter, .exe, se puede encontrar en tu proyecto bajo build\windows\runner\<modo de compilación>\. Además de ese ejecutable, necesitas lo siguiente:

• Desde el mismo directorio:

  • todos los archivos .dll
  • el directorio data

• Los redistribuibles de Visual C++. Puedes usar cualquiera de los métodos mostrados en las guías paso a paso de ejemplo de despliegue en el sitio de Microsoft para asegurarte de que los usuarios finales tengan los redistribuibles de C++. Si usas la opción local de la aplicación, debes copiar:

  • msvcp140.dll
  • vcruntime140.dll
  • vcruntime140_1.dll

  Coloca los archivos DLL en el directorio junto al ejecutable y las otras DLL, y empaquétalos juntos en un archivo zip. La estructura resultante se ve algo así:

  Release
  │   flutter_windows.dll
  │   msvcp140.dll
  │   my_app.exe
  │   vcruntime140.dll
  │   vcruntime140_1.dll
  │
  └───data
  │   │   app.so
  │   │   icudtl.dat
  
  ...
  

  content_copy

En este punto, si se desea, sería relativamente sencillo agregar esta carpeta a un instalador de Windows como Inno Setup, WiX, etc.

Para aprender cómo construir un .exe usando Inno Setup para distribuir tu aplicación de escritorio de Flutter para Windows, consulta la guía paso a paso de empaquetado para Windows.