Présenter les onboardings avec le SDK Flutter

Si vous avez personnalisé un onboarding avec le builder, vous n’avez pas besoin de vous occuper de son rendu dans le code de votre application Flutter pour l’afficher à l’utilisateur. Un tel onboarding contient à la fois ce qui doit être affiché et comment cela doit être affiché.

Avant de commencer, assurez-vous que :

1. Vous avez installé le SDK Flutter Adapty 3.8.0 ou version ultérieure.
2. Vous avez créé un onboarding.
3. Vous avez ajouté l’onboarding à un placement.

Le SDK Flutter Adapty propose deux façons de présenter les onboardings :

• Écran autonome

• Widget intégré

Afficher comme écran autonome

Pour afficher un onboarding comme écran autonome, utilisez la méthode onboardingView.present() sur l’onboardingView créée par la méthode createOnboardingView. Chaque view ne peut être utilisée qu’une seule fois. Si vous avez besoin d’afficher l’onboarding à nouveau, appelez createOnboardingView une nouvelle fois pour créer une nouvelle instance d’onboardingView.

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

Fermer l’onboarding

Quand vous avez besoin de fermer l’onboarding par programmation, utilisez la méthode dismiss() :

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

Configurer le style de présentation iOS

Configurez la manière dont l’onboarding est présenté sur iOS en passant le paramètre iosPresentationStyle à la méthode present(). Ce paramètre accepte les valeurs AdaptyUIIOSPresentationStyle.fullScreen (par défaut) ou AdaptyUIIOSPresentationStyle.pageSheet.

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

Intégrer dans la hiérarchie de widgets

Pour intégrer un onboarding dans votre arbre de widgets existant, utilisez directement le widget AdaptyUIOnboardingPlatformView dans votre hiérarchie de widgets 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)
    }
}

Écran de chargement lors de l’onboarding

Lors de la présentation d’un onboarding, vous pouvez remarquer un court écran de chargement entre votre écran de démarrage et l’onboarding pendant l’initialisation de la vue sous-jacente. Vous pouvez gérer cela de différentes façons selon vos besoins.

Contrôler l’écran de démarrage avec onDidFinishLoading

L’approche multiplateforme recommandée consiste à maintenir votre écran de démarrage ou une superposition personnalisée visible jusqu’à ce que l’onboarding soit entièrement chargé, puis à la masquer manuellement.

Avec le widget intégré, superposez votre propre widget par-dessus et masquez-le à l’appel de onDidFinishLoading :

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

Personnaliser le loader natif

Si vous avez besoin de personnaliser le loader par défaut lui-même, vous pouvez le remplacer par des layouts spécifiques à chaque plateforme. Cette approche nécessite des implémentations séparées pour Android et iOS :

• iOS : Ajoutez AdaptyOnboardingPlaceholderView.xib à votre projet Xcode
• Android : Créez adapty_onboarding_placeholder_view.xml dans res/layout et définissez-y un placeholder

Personnaliser l’ouverture des liens dans les onboardings

Par défaut, les liens dans les onboardings s’ouvrent dans un navigateur intégré à l’application. Cela offre une expérience fluide en affichant les pages web directement dans votre application, sans obliger l’utilisateur à changer d’app.

Si vous préférez ouvrir les liens dans un navigateur externe, vous pouvez personnaliser ce comportement en définissant le paramètre externalUrlsPresentation sur 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) {
  },
)

Désactiver les marges de zone sécurisée (Android)

Par défaut, sur les appareils Android, la vue de l’onboarding applique automatiquement des marges de zone sécurisée pour éviter les éléments système comme la barre d’état et la barre de navigation. Si vous souhaitez désactiver ce comportement et contrôler entièrement la mise en page, ajoutez une ressource booléenne à votre application :

1. Accédez à android/app/src/main/res/values. Si le fichier bools.xml n’existe pas, créez-le.

2. Ajoutez la ressource suivante :

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

Notez que les modifications s’appliquent globalement à tous les onboardings de votre application.