Flutter - Presenta paywalls del nuevo Paywall Builder

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Ese paywall contiene tanto lo que se debe mostrar como la forma en que se debe mostrar.

Esta guía es exclusivamente para paywalls del nuevo Paywall Builder, que requieren SDK v3.2.0 o posterior. El proceso para presentar paywalls varía según la versión del Paywall Builder con la que se hayan diseñado y para los paywalls de Remote Config.

El SDK de Adapty para Flutter ofrece dos formas de presentar paywalls:

  • Pantalla independiente

  • Widget embebido

Presentar como pantalla independiente

Para mostrar un paywall como pantalla independiente, usa el método view.present() en el view creado por el método createPaywallView. Cada view solo puede usarse una vez. Si necesitas mostrar el paywall de nuevo, llama a createPaywallView otra vez para crear una nueva instancia de view.

Reutilizar el mismo view sin recrearlo puede generar un error AdaptyUIError.viewAlreadyPresented.

try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras apps de ejemplo, que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

Cerrar el paywall

Cuando necesites cerrar el paywall mediante código, usa el método dismiss():

try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Mostrar diálogo

Usa este método en lugar de los diálogos de alerta nativos cuando haya un paywall presentado en Android. En Android, las alertas normales aparecen detrás del paywall y, por tanto, son invisibles para el usuario. Este método garantiza que el diálogo se muestre correctamente encima del paywall en todas las plataformas.

try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el paywall en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores AdaptyUIIOSPresentationStyle.fullScreen (predeterminado) o AdaptyUIIOSPresentationStyle.pageSheet.

try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Embeber en la jerarquía de widgets

Para embeber un paywall dentro de tu árbol de widgets existente, usa el widget AdaptyUIPaywallPlatformView directamente en la jerarquía de widgets de Flutter.

AdaptyUIPaywallPlatformView(
  paywall: paywall, // The paywall object you fetched
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidFailRendering: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)

Para que la vista de plataforma en Android funcione, asegúrate de que tu MainActivity extienda FlutterFragmentActivity:

class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}