Presentar onboardings en Flutter SDK

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 ya contiene tanto lo que debe mostrarse como la forma en que debe hacerse.

Antes de empezar, asegúrate de que:

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

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

• Pantalla independiente

• Widget embebido

Presentar 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
}

Embeber en la jerarquía de widgets

Para embeber un onboarding dentro de tu árbol de widgets existente, usa el widget AdaptyUIOnboardingPlatformView directamente en la 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)
    }
}

Loader durante el onboarding

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

Controlar el splash screen con onDidFinishLoading

El enfoque multiplataforma recomendado es mantener visible tu splash screen o superposición personalizada hasta que el onboarding se haya cargado por completo y luego ocultarla manualmente.

Al usar el widget embebido, superpón tu propio widget sobre él y oculta la superposición 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 in-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 rellenos de área segura (Android)

Por defecto, en dispositivos Android, la vista del onboarding aplica automáticamente rellenos de área segura para evitar los elementos de la UI 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 layout, 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 de forma global a todos los onboardings de tu app.