Saltar al contenido principal

Integrar una aplicación Flutter en tu proyecto macOS

Aprende cómo integrar una aplicación Flutter en tu proyecto macOS existente.

Los componentes de la UI de Flutter se pueden añadir gradualmente a tu aplicación macOS existente utilizando paquetes Swift.

Requisitos previos

#
  • Flutter 3.44 o posterior
  • Xcode 15.0 o posterior

Migrar desde la integración heredada (si corresponde)

#

Si ya has integrado Flutter en tu aplicación macOS utilizando frameworks embebidos, primero debes eliminar esa integración antes de seguir las instrucciones de Swift Package Manager a continuación.

Expandir para ver las instrucciones de migración desde la integración con frameworks embebidos

Si tu aplicación se integró previamente utilizando frameworks generados por el comando flutter build macos-framework, primero debes eliminar los frameworks de tu proyecto Xcode.

  1. Navega a la pestaña General de tu target y elimina todos los frameworks y bibliotecas relacionados con Flutter bajo Frameworks, Libraries, and Embedded Content.

    Esto incluye los archivos App.xcframework, FlutterMacOS.xcframework, FlutterPluginRegistrant.xcframework, y los archivos xcframework de cualquier plugin de Flutter.

  2. Eliminar el pod de Flutter de tu Podfile

    MyApp/Podfile
    ruby
    pod 'FlutterMacOS', :podspec => '/path/to/MyApp/Flutter/[build mode]/FlutterMacOS.podspec'

  3. Ejecuta pod install.

Organizar tus proyectos uno respecto del otro

#

Esta guía asume que tu aplicación macOS existente y tu aplicación Flutter residen en directorios hermanos. Si tienes una estructura de directorios diferente, deberás ajustar las rutas relativas de los ejemplos en consecuencia.

La estructura de directorios del ejemplo se asemeja a la siguiente:

  • my_flutter_app/
    • macos/
    • lib/
      • main.dart
  • MyNativeApp/
    • MyNativeApp.xcodeproj/

Integrar con Swift Package Manager

#

  1. Compilar el paquete Swift FlutterNativeIntegration

    Dentro de tu aplicación o módulo Flutter, ejecuta el siguiente comando:

    flutter build swift-package --platform macos

    Esto genera los siguientes directorios:

    • my_flutter_app/build/macos/SwiftPackages/
      • FlutterNativeIntegration/(Un paquete Swift)
      • Scripts/(Directorio de scripts y otros archivos necesarios)

    Opcionalmente, puedes cambiar la ubicación de esta salida con la bandera --output.

  2. Añadir FlutterNativeIntegration a tu proyecto Xcode

    1. En el Project navigator, haz clic derecho en tu proyecto y selecciona Add Files to "MyNativeApp"...

    2. Navega hasta el paquete Swift generado FlutterNativeIntegration y selecciónalo, luego haz clic en Add.

    3. Selecciona Reference files in place y haz clic en Finish.

    4. En el File inspector, verifica que la Location sea Relative to Project. Si no lo es, deberás mover el directorio de salida de Flutter para que sea un directorio hermano de tu aplicación nativa.

      Ubicación relativa de FlutterNativeIntegration mostrada en el inspector de archivos de Xcode.

      Ubicación relativa de FlutterNativeIntegration mostrada en el inspector de archivos de Xcode.

    5. Navega a la pestaña General de tu target y añade FlutterNativeIntegration bajo Frameworks, Libraries, and Embedded Content. FlutterNativeIntegration bajo Frameworks, Libraries, and Embedded Content.

      FlutterNativeIntegration bajo Frameworks, Libraries, and Embedded Content.

  3. Añadir configuraciones de compilación (Build Settings)

    1. En la pestaña Build Settings, establece la ubicación del directorio de salida del paquete Swift de la aplicación Flutter:

      FLUTTER_SWIFT_PACKAGE_OUTPUT=$SRCROOT/../my_flutter_app/build/macos/SwiftPackages

    2. Para configuraciones personalizadas, establece el modo de compilación de Flutter.

      Flutter admite tres modos de compilación: Debug, Profile y Release. El modo de compilación se determina utilizando el valor CONFIGURATION. Si tu configuración no coincide con una de estas, puedes establecer la configuración de compilación FLUTTER_BUILD_MODE en uno de estos valores.

      Establecer `FLUTTER_BUILD_MODE` para configuraciones personalizadas bajo **Build Settings**.

      Establecer FLUTTER_BUILD_MODE para configuraciones personalizadas bajo Build Settings.

    3. Solo para las configuraciones de Debug, establece los siguientes ajustes de compilación:

      ENABLE_APP_SANDBOX=YES
ENABLE_INCOMING_NETWORK_CONNECTIONS=YES
RUNTIME_EXCEPTION_ALLOW_JIT=YES
      Establece **Allow JIT** (RUNTIME_EXCEPTION_ALLOW_JIT) en **YES** en los **Build Settings** de tu target solo para las configuraciones de **Debug**.

      Establece Allow JIT (RUNTIME_EXCEPTION_ALLOW_JIT) en YES en los Build Settings de tu target solo para las configuraciones de Debug.

    4. (Opcional) Permitir que Xcode vuelva a compilar tu aplicación Flutter.

      Añade los siguientes ajustes de compilación a tu target para permitir que Xcode vuelva a compilar tu aplicación Flutter como parte de su proceso de compilación. Esto te permite realizar cambios en tu aplicación Flutter sin necesidad de volver a ejecutar el comando flutter build swift-package. Esto requiere una instalación de Flutter en la máquina.

      FLUTTER_APPLICATION_PATH=$SRCROOT/../my_flutter_app
ENABLE_USER_SCRIPT_SANDBOXING=NO

  4. Añadir script de ejecución de pre-acción al Scheme

    1. Abre Product > Scheme > Edit Scheme... > Build (en la barra lateral izquierda) > Pre-action > + > New Run Script Action

    2. Selecciona tu proyecto en el menú desplegable Provide build settings from.

    3. Establece el script con el siguiente contenido:

      /bin/sh $FLUTTER_SWIFT_PACKAGE_OUTPUT/Scripts/flutter_integration.sh prebuild
    Script de ejecución de pre-acción en el editor de Scheme.

    Script de ejecución de pre-acción en el editor de Scheme.

  5. Añadir nueva fase de compilación de script de ejecución a tu target

    1. Navega a la pestaña Build Phases de tu target > + > New Run Script Phase

    2. Establece el script con el siguiente contenido:

      /bin/sh $FLUTTER_SWIFT_PACKAGE_OUTPUT/Scripts/flutter_integration.sh assemble

    3. Desmarca la opción Based on dependency analysis

    4. Añade lo siguiente a Input File Lists:

      $(FLUTTER_SWIFT_PACKAGE_OUTPUT)/Scripts/FlutterAssembleInputs.xcfilelist
    Nueva fase de compilación de script de ejecución bajo Build Phases.

    Nueva fase de compilación de script de ejecución bajo Build Phases.

Próximos pasos

#

Ahora puedes añadir una pantalla de Flutter a tu aplicación macOS existente.

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-06-08. Ver código fuente oreportar un problema.