Afficher les onboardings dans Flutter SDK

Si vous avez personnalisé un onboarding à l’aide du builder, vous n’avez pas à vous soucier 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 la manière dont cela doit l’être.

Avant de commencer, vérifiez que :

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

Le SDK Flutter Adapty propose deux façons d’afficher les onboardings :

• Écran autonome

• Widget intégré

Afficher en écran autonome

Pour afficher un onboarding en écran autonome, utilisez la méthode onboardingView.present() sur l’onboardingView créé par la méthode createOnboardingView. Chaque view ne peut être utilisée qu’une seule fois. Si vous devez 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

Pour 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 façon 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)
    }
}

Chargement pendant l’onboarding

Lors de l’affichage d’un onboarding, vous pouvez remarquer un bref écran de chargement entre votre splash screen et l’onboarding, le temps que la vue sous-jacente s’initialise. Vous pouvez gérer cela de différentes façons selon vos besoins.

Contrôler le splash screen via onDidFinishLoading

L’approche multiplateforme recommandée consiste à maintenir votre splash screen ou votre overlay personnalisé visible jusqu’à ce que l’onboarding soit entièrement chargé, puis à le masquer manuellement.

Lorsque vous utilisez le widget intégré, superposez votre propre widget au-dessus de lui et masquez l’overlay lorsque onDidFinishLoading se déclenche :

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 mises en page 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 utilisateur fluide en affichant les pages web directement dans votre application, sans avoir à 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 d’onboarding applique automatiquement des marges de zone sécurisée pour éviter les éléments d’interface système tels que la barre d’état et la barre de navigation. Si vous souhaitez désactiver ce comportement et avoir un contrôle total sur la mise en page, vous pouvez le faire en ajoutant une ressource booléenne à votre application :

1. Rendez-vous dans 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 ces modifications s’appliquent globalement à tous les onboardings de votre application.