Presentar flows en modo Observer en Flutter SDK

Si usas el modo Observer, eres responsable de tu propia lógica de compras. Pero puedes delegar la UI del paywall al Flow & Paywall Builder.

Diseña la pantalla en el builder y el SDK de Adapty la renderiza de forma nativa. Actualiza los textos, el diseño y los precios cuando quieras, sin publicar una nueva versión de la app.

Esta guía explica cómo presentar un flow y gestionar los callbacks de compra. Si Adapty gestiona las compras por ti, consulta Mostrar flows y paywalls.

Antes de empezar

Necesitas:

• Adapty Flutter SDK 4.0 o posterior: Las versiones anteriores no pueden renderizar flows. Para migrar una app existente, consulta la guía de migración.
• observerMode establecido en true: Consulta la guía de instalación del SDK de Flutter.
• Integración inicial con el store: Configura Adapty con App Store y con Google Play.
• Un flow publicado con productos: Créalo en el Flow & Paywall Builder y asigna productos a él.
• Un placement del flow: Crea un placement y asigna tu flow a él.
• El flow obtenido en tu app: Obtén el flow y su configuración antes de mostrarlo.

Implementación

En el modo Observer, el SDK no realiza compras por ti. Cuando un usuario pulsa el botón de compra o restauración en un flow renderizado por Adapty, el SDK llama a tu AdaptyUIObserverModeResolver en su lugar — realiza la compra o restauración con tu propio código allí.

1. Implementa el AdaptyUIObserverModeResolver:

   class MyObserverModeResolver extends AdaptyUIObserverModeResolver {
     @override
     void observerModeDidInitiatePurchase(
       AdaptyUIFlowView view,
       AdaptyPaywallProduct product,
       void Function() onStartPurchase,
       void Function() onFinishPurchase,
     ) {
       onStartPurchase(); // the view shows its loading indicator
       // make the purchase with your own code, then:
       onFinishPurchase(); // the view hides the loading indicator
     }
   
     @override
     void observerModeDidInitiateRestore(
       AdaptyUIFlowView view,
       void Function() onStartRestore,
       void Function() onFinishRestore,
     ) {
       onStartRestore();
       // restore purchases with your own code, then:
       onFinishRestore();
     }
   }

El método observerModeDidInitiatePurchase te informa de que el usuario ha iniciado una compra, y observerModeDidInitiateRestore — de que el usuario ha iniciado una restauración. Activa tu flow personalizado de compra o restauración en respuesta.

Recuerda también invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para el comportamiento correcto del flow, como mostrar el indicador de carga, entre otras cosas:

2. Registra el resolver antes de mostrar cualquier pantalla:

   AdaptyUI().setObserverModeResolver(MyObserverModeResolver());

3. Crea y presenta la vista del flow como de costumbre: obtén el flow y crea su vista, luego preséntala. No se necesitan parámetros adicionales — una vez registrado el resolver, todo flow renderizado por Adapty enruta las compras y restauraciones a través de él.