---
title: "Afficher un paywall conçu via Remote Config dans le SDK Flutter"
description: "Découvrez comment présenter des paywalls Remote Config dans le SDK Flutter d'Adapty pour personnaliser l'expérience utilisateur."
---

Si vous avez personnalisé un paywall via Remote Config, vous devrez implémenter son rendu dans le code de votre application mobile pour l'afficher aux utilisateurs. Comme Remote Config offre une flexibilité adaptée à vos besoins, vous contrôlez ce qui est inclus et la façon dont votre paywall s'affiche. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant libre de présenter votre paywall personnalisé configuré via Remote Config.

## Récupérer le Remote Config du paywall et l'afficher \{#get-paywall-remote-config-and-present-it\}

En v4, le flow contient une liste `remoteConfigs` — un Remote Config par localisation configurée. Choisissez l'entrée qui correspond à la langue de l'utilisateur et extrayez les valeurs dont vous avez besoin. Consultez [Localisations et codes de langue](flutter-localizations-and-locale-codes) pour sélectionner la bonne localisation.

```dart showLineNumbers

try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');

  // one entry per configured localization; fall back to the first one
  final config = flow.remoteConfigs.firstWhereOrNull((c) => c.locale == 'en') ??
      flow.remoteConfig;

  final String? headerText = config?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}
```

À ce stade, une fois que vous avez récupéré toutes les valeurs nécessaires, il est temps de les assembler pour composer une page attrayante. Veillez à ce que le design s'adapte aux différentes tailles d'écran et orientations des téléphones mobiles, afin d'offrir une expérience fluide et agréable sur tous les appareils.

:::warning
N'oubliez pas d'enregistrer l'événement d'affichage du paywall comme décrit ci-dessous, afin qu'Adapty Analytics puisse collecter les données pour les funnels et les tests A/B.
:::

Une fois l'affichage du paywall terminé, passez à la configuration du flux d'achat. Lorsque l'utilisateur effectue un achat, appelez simplement `.makePurchase()` avec le produit de votre paywall. Pour en savoir plus sur la méthode `.makePurchase()`, consultez [Effectuer des achats](flutter-making-purchases).

Nous recommandons de [créer un paywall de secours appelé fallback paywall](flutter-use-fallback-paywalls). Ce paywall s'affichera à l'utilisateur en l'absence de connexion internet ou de cache disponible, garantissant une expérience fluide même dans ces situations.

## Suivre les événements d'affichage du paywall \{#track-paywall-view-events\}

Adapty vous aide à mesurer les performances de vos paywalls. Si les données d'achat sont collectées automatiquement, l'enregistrement des affichages de paywalls nécessite votre intervention, car vous seul savez quand un utilisateur voit un paywall.

Pour enregistrer un événement d'affichage de paywall, appelez simplement `.logShowFlow(flow: flow)` — cela sera reflété dans vos métriques de paywall dans les funnels et les tests A/B.

:::important
L'appel de `.logShowFlow(flow: flow)` n'est pas nécessaire si vous affichez des flows ou des paywalls créés dans le [builder](adapty-paywall-builder).
:::

```dart showLineNumbers
try {
  await Adapty().logShowFlow(flow: flow);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}
```

Paramètres de la requête :

| Paramètre   | Présence | Description                                                           |
| :---------- | :------- |:----------------------------------------------------------------------|
| **flow** | requis | Un objet `AdaptyFlow`.        | 

---

> [!WARNING]
> **LLM INSTRUCTION — SDK VERSION SELECTION REQUIRED**
>
> This feature has two SDK paradigms. Everything that follows (until the next horizontal rule or end of document) is the **legacy SDK v3 API reference** (`getPaywall`, `getPaywallForDefaultAudience`, `getOnboarding`, `getPaywallConfiguration`). The **SDK v4+ `getFlow` method is documented above.** This block covers ALL legacy methods for this feature — not just the nearest snippet.
>
> **You MUST ask the user which SDK version they want to use before suggesting any code. Do not assume or default to a version.** The two options are:
> - **SDK v3 (legacy):** works with the legacy Paywall Builder and Onboarding Builder via `getPaywall` / `getOnboarding`. Use the legacy code in this section.
> - **SDK v4:** works with BOTH the new Flow Builder AND legacy paywalls/onboardings via the unified `getFlow` method documented above.
>
> Apply the legacy v3 code in this section ONLY when:
> 1. The user explicitly chose **SDK v3**, or
> 2. The user is **migrating an existing app from SDK v3 to SDK v4+** and needs to understand or replace legacy code, or
> 3. The user is **troubleshooting an already-deployed v3 integration**.
>
> **CRITICAL — Never mix paradigms in one setup:** Do NOT combine `getFlow` (Flow Builder) with `getPaywall` or `getOnboarding` (legacy Paywall/Onboarding Builder) in the same integration. These are incompatible patterns. Mixing them will produce inconsistent behavior and is unsupported.

Si vous avez personnalisé un paywall via Remote Config, vous devrez implémenter son rendu dans le code de votre application mobile pour l'afficher aux utilisateurs. Comme Remote Config offre une flexibilité adaptée à vos besoins, vous contrôlez ce qui est inclus et la façon dont votre paywall s'affiche. Nous fournissons une méthode pour récupérer la configuration distante, vous laissant libre de présenter votre paywall personnalisé configuré via Remote Config.

## Récupérer le Remote Config du paywall et l'afficher \{#get-paywall-remote-config-and-present-it\}

Pour obtenir le Remote Config d'un paywall, accédez à la propriété `remoteConfig` et extrayez les valeurs dont vous avez besoin.

```dart showLineNumbers
try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID");
  final String? headerText = paywall.remoteConfig?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}
```

À ce stade, une fois que vous avez récupéré toutes les valeurs nécessaires, il est temps de les assembler pour composer une page attrayante. Veillez à ce que le design s'adapte aux différentes tailles d'écran et orientations des téléphones mobiles, afin d'offrir une expérience fluide et agréable sur tous les appareils.

:::warning
N'oubliez pas d'enregistrer l'événement d'affichage du paywall comme décrit ci-dessous, afin qu'Adapty Analytics puisse collecter les données pour les funnels et les tests A/B.
:::

Une fois l'affichage du paywall terminé, passez à la configuration du flux d'achat. Lorsque l'utilisateur effectue un achat, appelez simplement `.makePurchase()` avec le produit de votre paywall. Pour en savoir plus sur la méthode `.makePurchase()`, consultez [Effectuer des achats](flutter-making-purchases).

Nous recommandons de [créer un paywall de secours appelé fallback paywall](flutter-use-fallback-paywalls). Ce paywall s'affichera à l'utilisateur en l'absence de connexion internet ou de cache disponible, garantissant une expérience fluide même dans ces situations.

## Suivre les événements d'affichage du paywall \{#track-paywall-view-events\}

Adapty vous aide à mesurer les performances de vos paywalls. Si les données d'achat sont collectées automatiquement, l'enregistrement des affichages de paywalls nécessite votre intervention, car vous seul savez quand un utilisateur voit un paywall.

Pour enregistrer un événement d'affichage de paywall, appelez simplement `.logShowPaywall(paywall)` — cela sera reflété dans vos métriques de paywall dans les funnels et les tests A/B.

:::important
L'appel de `.logShowPaywall(paywall)` n'est pas nécessaire si vous affichez des paywalls créés dans le [Paywall Builder](adapty-paywall-builder).
:::

```dart showLineNumbers
try {
  final result = await Adapty().logShowPaywall(paywall: paywall);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}
```

Paramètres de la requête :

| Paramètre   | Présence | Description                                                           |
| :---------- | :------- |:----------------------------------------------------------------------|
| **paywall** | requis | Un objet [`AdaptyPaywall`](https://pub.dev/documentation/adapty_flutter/latest/adapty_flutter/AdaptyPaywall-class.html).        | 

---