Añadir extensiones de aplicación de iOS

Esta guía te muestra cómo usar extensiones de aplicación de iOS con una aplicación Flutter.

Las extensiones de aplicación de iOS te permiten expandir la funcionalidad fuera de tu aplicación iOS. Tu aplicación podría aparecer como un Widget de la pantalla de inicio, o puedes hacer que partes de tu aplicación estén disponibles dentro de otras aplicaciones.

En el siguiente ejemplo, cuando un usuario selecciona una foto para compartir en la aplicación Fotos de iOS, se muestra una aplicación Flutter llamada Example App With Extension en la hoja de compartir de la aplicación Fotos:

Si quieres integrar tu aplicación Flutter con el sistema operativo iOS, puedes añadir extensiones de aplicación de iOS a tu proyecto Flutter. Para un flujo de trabajo sin problemas, los siguientes pasos muestran cómo añadir una extensión de aplicación Share a una nueva aplicación Flutter llamada example_app_with_extension, pero siempre puedes empezar con un proyecto existente.

1. En la consola, crea un nuevo proyecto Flutter llamado example_app_with_extension.

   $ flutter create example_app_with_extension
   

   content_copy

2. En la consola, abre el espacio de trabajo (workspace) de Xcode para el proyecto example_app_with_extension.

   $ cd example_app_with_extension && open ios/Runner.xcworkspace
   

   content_copy

3. En Xcode, añade una extensión de aplicación llamada Share y llámala ShareExtension.

   • En la barra de menús de Xcode, selecciona File > New > Target.

   • Añade Share Extension.

   • En el campo Name, introduce ShareExtension.

   • Haz clic en Finish.

   • En el cuadro de diálogo Activate … Scheme que aparece, selecciona Activate.

4. En Xcode, cambia el orden del proceso de compilación (build).

   • Abre el navegador del proyecto (View > Navigators > Project).

   • En el navegador del proyecto, en la parte superior, selecciona Runner.

   • En la ventana principal bajo TARGETS, selecciona Runner.

   • Abre la pestaña Build Phases.

   • Arrastra Embed Foundation Extensions por encima de Run Script.

5. Asegúrate de que el valor de iOS para Minimum Deployments esté configurado correctamente y coincida tanto en Runner como en ShareExtension.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • En el navegador del proyecto, en la parte superior, selecciona Runner.

   • En la ventana principal bajo TARGETS, selecciona Runner.

   • En la pestaña General, comprueba el valor del menú desplegable Minimum Deployments para que coincida con el que tienes en la pestaña ShareExtension > General.

6. En la consola, ejecuta el siguiente comando para volver a compilar (rebuild) tu aplicación iOS:

   $ flutter build ios --config-only
   

   content_copy

7. Probar tu aplicación con el simulador.

Cuando añades una nueva extensión de aplicación, Xcode genera código de muestra basado en la plantilla que seleccionaste. Para obtener más información sobre el código generado y WidgetKit, consulta la documentación de extensiones de aplicación de Apple.

Después de haber añadido una extensión de aplicación a tu proyecto Flutter, puedes probarla utilizando un simulador o un dispositivo físico. Si estás probando tu extensión en modo debug, debes usar el simulador de iOS.

Los siguientes pasos asumen que estás usando la aplicación de muestra y la extensión Share de Añadir extensiones de aplicación de iOS.

Las aplicaciones Flutter interactúan con las extensiones de aplicación de iOS utilizando las mismas técnicas que las aplicaciones UIKit o SwiftUI. La aplicación contenedora y la extensión de aplicación no se comunican directamente. Es posible que la aplicación contenedora no se esté ejecutando mientras el usuario del dispositivo interactúa con la extensión. La aplicación y tu extensión pueden leer y escribir en recursos compartidos o utilizar APIs de nivel superior para comunicarse entre sí.

Algunas extensiones tienen APIs. Por ejemplo, el framework Core Spotlight indexa tu aplicación, permitiendo a los usuarios buscar desde Spotlight y Safari. El framework WidgetKit puede activar una actualización de tu Widget de la pantalla de inicio.

Para simplificar la forma en que tu aplicación se comunica con las extensiones, los plugins de Flutter envuelven estas APIs. Para encontrar plugins que envuelvan las APIs de las extensiones, consulta Aprovechar las APIs y frameworks del sistema de Apple o busca en pub.dev.

Para compartir recursos entre tu aplicación Flutter y tu extensión de aplicación, coloca el target de la aplicación Runner y el target de la extensión en el mismo App Group.

Para añadir un target a un App Group:

1. Abre la configuración del target en Xcode.

2. Navega a la pestaña Signing & Capabilities.

3. Selecciona + Capability y luego App Groups.

4. Elige a qué App Group deseas añadir el target a partir de una de las dos opciones:

   1. Selecciona un App Group de la lista.
   2. Haz clic en + para añadir un nuevo App Group.

Cuando dos targets pertenecen al mismo App Group, pueden leer y escribir en el mismo origen de datos. Elige uno de los siguientes orígenes para tus datos.

• Clave/valor: Utiliza el plugin shared_preference_app_group para leer o escribir en UserDefaults dentro del mismo App Group.
• Archivo: Utiliza la ruta del contenedor del App Group obtenida del plugin path_provider para leer y escribir archivos.
• Base de datos: Utiliza la ruta del contenedor del App Group obtenida del plugin path_provider para crear una base de datos con el plugin sqflite.

Las tareas en segundo plano proporcionan un medio para actualizar tu extensión mediante código independientemente del estado de tu aplicación.

Para programar trabajo en segundo plano desde tu aplicación Flutter, utiliza el plugin workmanager.

Es posible que quieras dirigir a los usuarios desde una extensión de aplicación a una página específica en tu aplicación Flutter. Para abrir una ruta específica en tu aplicación, puedes utilizar enlaces profundos (deep linking).

Por defecto, la vista de Flutter (flutter view) no maneja gestos de desplazamiento (scroll) en una extensión Share. Para admitir una lista deslizable en la extensión Share, sigue las instrucciones en GitHub.

Puedes abrir tu aplicación Flutter directamente en algunas extensiones de aplicación de iOS, como la extensión Share, con un FlutterViewController.

En el siguiente ejemplo, se abre una aplicación Flutter llamada Example App With Extension en la extensión Share, lo que permite a los usuarios compartir contenido entre aplicaciones:

Sigue estos pasos para mostrar una aplicación Flutter dentro de una extensión de aplicación Share. En este ejemplo, el esquema (scheme) de la extensión de aplicación se llama ShareExtension, el esquema de la aplicación Flutter se llama Runner y la aplicación Flutter se llama Example App With Extension:

1. Añade una extensión a tu aplicación Flutter si aún no lo has hecho.

2. En la consola, navega al directorio de tu proyecto Flutter y luego abre tu proyecto en Xcode con el siguiente comando:

   open ios/Runner.xcworkspace
   

   content_copy

3. En Xcode, desactiva el sandboxing de scripts de usuario.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • En la ventana principal bajo TARGETS, selecciona ShareExtension.

   • Abre la pestaña Build Settings.

   • Navega a Build Options.

   • Establece User Script Sandboxing como No.

4. En Xcode, añade la acción previa (pre-action) al esquema ShareExtension.

   • Abre la ventana Manage Schemes (Product > Scheme > Manage Schemes).

   • Selecciona el esquema ShareExtension y edítalo.

   • Expande la pestaña Build.

   • Selecciona Pre-actions.

   • Haz clic en + y selecciona New Run Script Action.

   • En la lista desplegable Provide build settings from, selecciona ShareExtension.

   • En el campo de texto Shell, introduce:

     /bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" prepare
     

     content_copy

   • Haz clic en Close.

5. En Xcode, comparte las configuraciones de compilación (build).

   • Abre el navegador del proyecto (View > Navigators > Project).

   • En la ventana principal bajo PROJECT, selecciona Runner.

   • Abre la pestaña Info.

   • Expande Configuration.

   • Expande Debug y actualiza el valor de ShareExtension para que coincida con el valor de Runner.

   • Repite el paso anterior para Profile y Release.

   • Cuando hayas terminado, asegúrate de que las configuraciones se vean similares a las siguientes:

     

6. (Opcional) En Xcode, reemplaza cualquier archivo storyboard con una clase de extensión, si es necesario.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • Selecciona Runner > ShareExtension > Info.

   • Expande Information Property List.

   • Elimina la clave NSExtensionMainStoryboard.

   • Añade la clave NSExtensionPrincipalClass.

   • Añade uno de estos valores para la clave NSExtensionPrincipalClass:

     • (Swift) ShareExtension.ShareViewController
     • (Objective-C) ShareViewController

7. En Xcode, actualiza ShareViewController para usar FlutterViewController.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • Selecciona Runner > ShareExtension > ShareViewController.

   • Actualiza ShareViewController para usar la clase FlutterViewController:

import UIKit
import Flutter
​
class ShareViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        showFlutter()
    }
​
    func showFlutter() {
        let flutterEngine = FlutterEngine(name: "my flutter engine")
        flutterEngine.run()
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
        addChild(flutterViewController)
        view.addSubview(flutterViewController.view)
        flutterViewController.view.frame = view.bounds
    }
​
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        self.extensionContext?.cancelRequest(
            withError: NSError(domain: Bundle.main.bundleIdentifier!, code: 0))
    }
}

@import Flutter;
@import UIKit;
​
@interface ShareViewController : UIViewController
​
@end

#import "ShareViewController.h"
@import Flutter;
​
@implementation ShareViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    [self showFlutter];
}
​
- (void)showFlutter {
    FlutterEngine *flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
    [flutterEngine run];
    FlutterViewController *flutterViewController =
            [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self addChildViewController:flutterViewController];
    [self.view addSubview:flutterViewController.view];
    flutterViewController.view.frame = self.view.bounds;
}
​
- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
    [self.extensionContext cancelRequestWithError:[NSError errorWithDomain:NSBundle.mainBundle.bundleIdentifier code:0 userInfo:nil]];
}
@end

8. Probar tu aplicación con el simulador.

Sigue estos pasos para registrar plugins para una extensión de aplicación. En este ejemplo, el esquema (scheme) de la extensión de aplicación se llama ShareExtension, el esquema de la aplicación Flutter se llama Runner y la aplicación Flutter se llama Example App With Extension:

1. Añade una extensión a tu aplicación Flutter si aún no lo has hecho.

2. En Xcode, añade GeneratedPluginRegistrant.m al target de la extensión de aplicación.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • En la ventana principal bajo TARGETS, selecciona ShareExtension.

   • Abre la pestaña Build Phases.

   • Expande Compile Sources.

   • Haz clic en +.

   • De la lista en el cuadro de diálogo Choose item to add, selecciona GeneratedPluginRegistrant.m.

   • Haz clic en Add.

3. (Solo Swift) En Xcode, actualiza el ajuste de compilación (build setting) SWIFT_OBJC_BRIDGING_HEADER.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • En la ventana principal bajo TARGETS, selecciona ShareExtension.

   • Abre la pestaña Build Settings.

   • Selecciona el filtro All.

   • Navega a Swift Compiler - General y cambia el valor de la clave Objective-C Bridging Header a Runner/Runner-Bridging-Header.h.

4. En Xcode, actualiza el código de ShareViewController para registrar GeneratedPluginRegistrant.h.

   • Abre el navegador del proyecto (View > Navigators > Project).

   • Selecciona Runner > ShareExtension > ShareViewController.

   • Actualiza el archivo ShareViewController para usar GeneratedPluginRegistrant.h:

// Add this inside `showFlutter()` at the top
GeneratedPluginRegistrant.register(with: flutterEngine)

// Add this import at the top
#import "GeneratedPluginRegistrant.h"

// Add this after [flutterEngine run]
[GeneratedPluginRegistrant registerWithRegistry:flutterEngine];

5. (Xcode) Prueba tu aplicación con el simulador.

• Debes utilizar un simulador de iOS para probar tu extensión en modo debug.

• Flutter no admite completamente la ejecución de extensiones de aplicación en modo debug en dispositivos físicos cuando se utilizan para construir interfaces de usuario (UIs) de extensión, porque un dispositivo físico podría quedarse sin memoria.

• Las extensiones de aplicación de iOS tienen memoria limitada. Se aconseja modificar únicamente la interfaz de usuario de una extensión de aplicación si la extensión admite al menos 100 MB de memoria.

El paquete home_widget proporciona una gran cantidad de funcionalidades, que incluyen lo siguiente:

• Responder a la entrada del usuario en extensiones de aplicación utilizando código Dart.

• Renderizar Widgets de Flutter en una extensión de aplicación como una imagen.

• Guardar y recuperar datos de UserDefaults en iOS.

Para obtener instrucciones paso a paso sobre el uso de extensiones de aplicación con tu aplicación Flutter en iOS, consulta el codelab Añadir un widget de pantalla de inicio a tu aplicación Flutter.

Para aprender más sobre las diversas formas en que puedes añadir una pantalla Flutter a una aplicación iOS, consulta Añadir una pantalla Flutter a una aplicación iOS.