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

Antes de empezar, asegúrate de:

1. Tener instalado el SDK de Flutter de Adapty 3.8.0 o posterior.
2. Haber creado un onboarding.
3. Haber 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, utiliza 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
}

Incrustar en la jerarquía de widgets

Para incrustar 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 mostrar 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 diferentes maneras según tus necesidades.

Control de la splash screen mediante onDidFinishLoading

El enfoque recomendado para multiplataforma es mantener visible tu splash screen o superposición personalizada hasta que el onboarding haya cargado completamente y, a continuación, ocultarla manualmente.

Si usas el widget embebido, coloca tu propio widget encima 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 que los enlaces se abran 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) {
  },
)

Deshabilitar 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 del sistema como la barra de estado y la barra de navegación. Sin embargo, si quieres deshabilitar este comportamiento y tener control total sobre el diseño, puedes hacerlo añadiendo un recurso booleano a tu aplicación:

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.