---
title: "Afficher les flows & paywalls - Flutter"
description: "Présentez les flows et paywalls dans les applications Flutter grâce aux fonctionnalités de monétisation d'Adapty."
---

Si vous avez conçu un flow ou un paywall avec le Flow Builder ou le Paywall Builder, vous n'avez pas à vous soucier de son rendu dans le code de votre application mobile pour l'afficher à l'utilisateur. Un tel flow ou paywall contient à la fois ce qui doit être affiché et comment cela doit l'être.

:::warning

Ce guide concerne les flows et les paywalls créés avec le Paywall Builder. Pour afficher des **paywalls Remote Config**, consultez [Afficher un paywall conçu avec la Remote Config](present-remote-config-paywalls-flutter).

:::

Le SDK Flutter d'Adapty propose deux façons d'afficher les flows et les paywalls :

- **Écran autonome**

- **Widget intégré**

## Afficher en tant qu'écran autonome \{#present-as-standalone-screen\}

Pour afficher un flow ou un paywall en tant qu'écran autonome, utilisez la méthode `view.present()` sur la `view` créée par la méthode [`createFlowView`](flutter-get-pb-paywalls#fetch-the-view-configuration). Chaque `view` ne peut être présentée qu'une seule fois : une fois fermée, la vue est libérée de la mémoire. Si vous devez afficher à nouveau le flow ou le paywall, appelez `createFlowView` une nouvelle fois pour créer une nouvelle instance de `view`.

```dart showLineNumbers title="Flutter"
try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
:::tip

Vous souhaitez voir un exemple concret d'intégration du SDK Adapty dans une application mobile ? Consultez nos [exemples d'applications](sample-apps), qui illustrent la configuration complète, notamment l'affichage des paywalls, les achats et d'autres fonctionnalités de base.

:::

### Fermer le flow ou le paywall \{#dismiss-the-flow-or-paywall\}

Quand vous devez fermer un flow ou un paywall par programmation, utilisez la méthode `dismiss()` :

```dart showLineNumbers title="Flutter"
try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```

:::note
Fermer une vue la libère de la mémoire — une vue fermée ne peut plus être réaffichée. Créez-en une nouvelle avec `createFlowView` à la place.
:::

### Afficher une boîte de dialogue \{#show-dialog\}

Utilisez cette méthode à la place des boîtes de dialogue d'alerte natives lorsqu'un flow ou une vue paywall est affiché sur Android. Sur Android, les alertes classiques apparaissent derrière la vue, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du flow ou du paywall sur toutes les plateformes.

```dart showLineNumbers title="Flutter"
try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}
```

### Configurer le style de présentation iOS \{#configure-ios-presentation-style\}

Configurez la façon dont le flow ou le paywall 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 view.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 flow ou un paywall dans votre arbre de widgets existant, utilisez directement le widget `AdaptyUIFlowPlatformView` dans votre hiérarchie de widgets Flutter.

```dart showLineNumbers title="Flutter"
AdaptyUIFlowPlatformView(
  flow: flow, // The flow object you fetched
  locale: 'en', // The localization to render the flow with
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidReceiveError: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)
```

:::note 
Pour que la vue de la plateforme Android fonctionne, assurez-vous que votre `MainActivity` étend `FlutterFragmentActivity` :

```kotlin showLineNumbers title="Kotlin"
class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}
```
:::

---

> [!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 avec le Paywall Builder, vous n'avez pas à vous soucier de son rendu dans le code de votre application mobile pour l'afficher à l'utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et la manière dont cela doit l'être.

:::warning

Ce guide concerne uniquement les **paywalls créés avec le nouveau Paywall Builder**, qui nécessitent SDK v3.2.0 ou une version ultérieure. Le processus de présentation des paywalls diffère selon la version du Paywall Builder utilisée et selon les paywalls de Remote Config.

- Pour présenter des **paywalls de Remote Config**, consultez [Afficher un paywall conçu avec Remote Config](present-remote-config-paywalls-flutter).

:::

Le SDK Flutter d'Adapty propose deux façons de présenter les paywalls :

- **Écran autonome**

- **Widget intégré**

## Afficher comme écran autonome \{#present-as-standalone-screen\}

Pour afficher un paywall comme écran autonome, utilisez la méthode `view.present()` sur le `view` créé par la méthode [`createPaywallView`](flutter-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder). Chaque `view` ne peut être utilisé qu'une seule fois. Si vous devez afficher le paywall à nouveau, appelez `createPaywallView` une nouvelle fois pour créer une nouvelle instance de `view`.

:::warning

Réutiliser le même `view` sans le recréer peut entraîner une erreur `AdaptyUIError.viewAlreadyPresented`.
:::

```dart showLineNumbers title="Flutter"
try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
:::tip

Vous souhaitez voir un exemple concret d'intégration du SDK Adapty dans une application mobile ? Consultez nos [exemples d'applications](sample-apps), qui illustrent la configuration complète, notamment l'affichage des paywalls, les achats et d'autres fonctionnalités de base.

:::

### Fermer le paywall \{#dismiss-the-paywall\}

Pour fermer le paywall par programmation, utilisez la méthode `dismiss()` :

```dart showLineNumbers title="Flutter"
try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```

### Afficher une boîte de dialogue \{#show-dialog\}

Utilisez cette méthode à la place des boîtes de dialogue d'alerte natives lorsqu'une vue de paywall est affichée sur Android. Sur Android, les alertes classiques apparaissent derrière la vue du paywall, ce qui les rend invisibles pour les utilisateurs. Cette méthode garantit un affichage correct de la boîte de dialogue au-dessus du paywall sur toutes les plateformes.

```dart showLineNumbers title="Flutter"
try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}
```

### Configurer le style de présentation iOS \{#configure-ios-presentation-style\}

Configurez la façon dont le paywall 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 view.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 paywall dans votre arborescence de widgets existante, utilisez le widget `AdaptyUIPaywallPlatformView` directement dans votre hiérarchie de widgets Flutter.

```dart showLineNumbers title="Flutter"
AdaptyUIPaywallPlatformView(
  paywall: paywall, // The paywall object you fetched
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidFailRendering: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)
```

:::note
Pour que la vue de plateforme Android fonctionne, assurez-vous que votre `MainActivity` étend `FlutterFragmentActivity` :

```kotlin showLineNumbers title="Kotlin"
class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}
```
:::

---