Presentar onboardings en el SDK de Flutter

Si has personalizado un onboarding con el builder, no necesitas preocuparte por renderizarlo en el código de tu app Flutter para mostrárselo al usuario. Ese onboarding contiene tanto lo que debe mostrarse como la forma en que debe mostrarse.

Antes de empezar, asegúrate de que:

1. Has instalado Adapty Flutter SDK 3.8.0 o posterior.
2. Has creado un onboarding.
3. Has añadido el onboarding a un placement.

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

• Pantalla independiente

• Widget embebido

Mostrar como pantalla independiente

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

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

Cerrar el onboarding

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

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

Configurar el estilo de presentación en iOS

Configura cómo se presenta el onboarding 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 onboardingView.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Integrar en la jerarquía de widgets

Para integrar un onboarding dentro de tu árbol de widgets existente, usa el widget AdaptyUIOnboardingPlatformView directamente en tu jerarquía de widgets de Flutter.

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding, // The onboarding object you fetched
  onDidFinishLoading: (meta) {
  },
  onDidFailWithError: (error) {
  },
  onCloseAction: (meta, actionId) {
  },
  onPaywallAction: (meta, actionId) {
  },
  onCustomAction: (meta, actionId) {
  },
  onStateUpdatedAction: (meta, elementId, params) {
  },
  onAnalyticsEvent: (meta, event) {
  },
)

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

Cargador durante el onboarding

Al presentar un onboarding, puede que notes una breve pantalla de carga entre tu pantalla de presentación y el onboarding mientras se inicializa la vista subyacente. Puedes gestionar esto de distintas formas según tus necesidades.

Controla la pantalla de presentación con onDidFinishLoading

El enfoque multiplataforma recomendado es mantener visible la pantalla de carga o superposición personalizada hasta que el onboarding esté completamente cargado, y luego ocultarla manualmente.

Al usar el widget embebido, superpón tu propio widget sobre él y ocúltalo cuando se dispare onDidFinishLoading:

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  onDidFinishLoading: (meta) {
    // Hide your custom splash screen or overlay here
  },
  // ... other callbacks
)

Personalizar el loader nativo

Si necesitas personalizar el loader predeterminado, puedes reemplazarlo con layouts específicos de cada plataforma. Este enfoque requiere implementaciones separadas para Android e iOS:

• iOS: Añade AdaptyOnboardingPlaceholderView.xib a tu proyecto de Xcode
• Android: Crea adapty_onboarding_placeholder_view.xml en res/layout y define ahí un placeholder

Personalizar cómo se abren los enlaces en los onboardings

Por defecto, los enlaces en los onboardings se abren en un navegador integrado en la app. Esto ofrece una experiencia fluida al mostrar las páginas web dentro de tu aplicación, sin que el usuario tenga que cambiar de app.

Si prefieres abrir los enlaces en un navegador externo, puedes personalizar este comportamiento estableciendo el parámetro externalUrlsPresentation en AdaptyWebPresentation.externalBrowser:

final onboardingView = await AdaptyUI().createOnboardingView(
  onboarding: onboarding,
  externalUrlsPresentation: AdaptyWebPresentation.externalBrowser, // default – AdaptyWebPresentation.inAppBrowser
);

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

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  externalUrlsPresentation: AdaptyWebPresentation.externalBrowser, // default – AdaptyWebPresentation.inAppBrowser
  onDidFinishLoading: (meta) {
  },
  onDidFailWithError: (error) {
  },
  onCloseAction: (meta, actionId) {
  },
  onPaywallAction: (meta, actionId) {
  },
  onCustomAction: (meta, actionId) {
  },
  onStateUpdatedAction: (meta, elementId, params) {
  },
  onAnalyticsEvent: (meta, event) {
  },
)

Desactivar los márgenes de área segura (Android)

Por defecto, en dispositivos Android, la vista de onboarding aplica automáticamente márgenes de área segura para evitar elementos de la interfaz del sistema como la barra de estado y la barra de navegación. Sin embargo, si quieres desactivar este comportamiento y tener control total sobre el diseño, puedes hacerlo añadiendo un recurso booleano a tu app:

1. Ve a android/app/src/main/res/values. Si no existe el archivo bools.xml, créalo.

2. Añade el siguiente recurso:

<resources>
    <bool name="adapty_onboarding_enable_safe_area_paddings">false</bool>
</resources>

Ten en cuenta que los cambios se aplican globalmente a todos los onboardings de tu app.