---
title: "Afficher les onboardings dans Flutter SDK"
description: "Découvrez comment présenter efficacement les onboardings pour générer plus de conversions."
---
:::warning
**Les onboardings sont dépréciés dans le SDK v4 et seront supprimés dans une prochaine version.** Ils ne reçoivent plus de correctifs ni d'améliorations. Utilisez plutôt les [flows](flutter-get-pb-paywalls) : contrairement aux onboardings qui s'exécutent dans une WebView, les flows s'affichent nativement sur l'appareil — pour des animations plus fluides, un rendu natif cohérent, des temps de chargement réduits, et sans dépendance au runtime WebView. Consultez [Obtenir des flows et paywalls](flutter-get-pb-paywalls) et [Afficher des flows et paywalls](flutter-present-paywalls) pour démarrer.
:::
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](sdk-installation-flutter) version 3.8.0 ou ultérieure.
2. Vous avez [créé un onboarding](create-onboarding).
3. Vous avez ajouté l'onboarding à un [placement](placements).
Le SDK Flutter Adapty propose deux façons d'afficher les onboardings :
- **Écran autonome**
- **Widget intégré**
## Afficher en écran autonome \{#present-as-standalone-screen\}
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`.
:::warning
Réutiliser le même `onboardingView` sans le recréer peut provoquer une erreur `AdaptyUIError.viewAlreadyPresented`.
:::
```dart showLineNumbers title="Flutter"
try {
await onboardingView.present();
} on AdaptyError catch (e) {
// handle the error
} catch (e) {
// handle the error
}
```
### Fermer l'onboarding \{#dismiss-the-onboarding\}
Pour fermer l'onboarding par programmation, utilisez la méthode `dismiss()` :
```dart showLineNumbers title="Flutter"
try {
await onboardingView.dismiss();
} on AdaptyError catch (e) {
// handle the error
} catch (e) {
// handle the error
}
```
### Configurer le style de présentation iOS \{#configure-ios-presentation-style\}
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`.
```dart showLineNumbers
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 \{#embed-in-widget-hierarchy\}
Pour intégrer un onboarding dans votre arbre de widgets existant, utilisez directement le widget `AdaptyUIOnboardingPlatformView` dans votre hiérarchie de widgets Flutter.
```dart showLineNumbers title="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) {
},
)
```
:::note
Pour que la platform view Android fonctionne, assurez-vous que votre `MainActivity` étend `FlutterFragmentActivity` :
```kotlin showLineNumbers title="Kotlin"
class MainActivity : FlutterFragmentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
}
}
```
:::
## Chargement pendant l'onboarding \{#loader-during-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 \{#control-splash-screen-using-ondidfinishloading\}
:::note
Cette approche est uniquement disponible lors de l'intégration de l'onboarding en tant que widget. Elle n'est pas disponible pour la présentation en écran autonome.
:::
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 :
```dart showLineNumbers title="Flutter"
AdaptyUIOnboardingPlatformView(
onboarding: onboarding,
onDidFinishLoading: (meta) {
// Hide your custom splash screen or overlay here
},
// ... other callbacks
)
```
### Personnaliser le loader natif \{#customize-native-loader\}
:::important
Cette approche est spécifique à chaque plateforme et nécessite la maintenance de code UI natif. Elle n'est pas recommandée sauf si vous maintenez déjà des couches natives distinctes dans votre application.
:::
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 \{#customize-how-links-open-in-onboardings\}
:::important
La personnalisation de l'ouverture des liens dans les onboardings est disponible à partir du SDK Adapty v3.15.1.
:::
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` :
```dart showLineNumbers title="Flutter"
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
}
```
```dart showLineNumbers title="Flutter"
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) \{#disable-safe-area-paddings-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 :
```xml
false
```
Notez que ces modifications s'appliquent globalement à tous les onboardings de votre application.