---
title: "Premiers pas"
description: "Découvrez comment fonctionnent les placements, les audiences et les tests A/B avant d'intégrer Adapty dans votre application FlutterFlow."
---

Avec Adapty, vous pouvez créer et exécuter des paywalls et des tests A/B à différents points du parcours utilisateur de votre application mobile, comme l'Onboarding, les Paramètres, etc. Ces points sont appelés [Placements](placements). Un placement dans votre application peut gérer plusieurs paywalls ou [tests A/B](ab-tests) à la fois, chacun destiné à un groupe d'utilisateurs spécifique, que nous appelons [Audiences](audience). Vous pouvez également expérimenter avec les paywalls, en remplaçant l'un par un autre au fil du temps sans publier une nouvelle version de l'application. La seule chose que vous codez en dur dans l'application mobile est l'identifiant du placement.

  <img src="/assets/shared/img/audience.jpg"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

La bibliothèque Adapty maintient votre paywall à jour avec les derniers produits de votre Adapty Dashboard. Elle [récupère les données des produits](ff-action-flow), [les affiche sur votre paywall](ff-add-variables-to-paywalls), [gère les achats](ff-make-purchase) et [vérifie le niveau d'accès de l'utilisateur](ff-check-subscription-status) pour savoir s'il doit accéder au contenu payant.

Pour commencer, [ajoutez la bibliothèque Adapty](ff-getting-started#add-the-adapty-library-as-a-dependency) à votre projet FlutterFlow et [initialisez-la](ff-getting-started#initiate-adapty-plugin) comme indiqué ci-dessous.

:::warning

Avant de commencer, notez les limitations suivantes :

- La bibliothèque Adapty pour FlutterFlow ne prend pas en charge les applications web. Évitez de compiler des applications web avec elle.
- La bibliothèque Adapty pour FlutterFlow ne prend pas en charge les paywalls créées avec le Paywall Builder d'Adapty. Vous devez concevoir votre propre paywall dans FlutterFlow avant d'activer les achats avec Adapty.

:::

## Ajouter la bibliothèque Adapty comme dépendance \{#add-the-adapty-library-as-a-dependency\}

1. Dans le [FlutterFlow Dashboard](https://app.flutterflow.io/dashboard), ouvrez votre projet, puis cliquez sur **Settings and Integrations** dans le menu de gauche. Dans la section **Project setup** sur la gauche, sélectionnez **Project dependencies**.
   

     <img src="/assets/shared/img/main_settings.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />

2. Dans la section **FlutterFlow Libraries**, cliquez sur **Add Library** et entrez `adapty-xtuel0`. Cliquez sur **Add**.

3. Vous devez maintenant associer votre clé SDK à la bibliothèque. Cliquez sur **View details** à côté de la bibliothèque.

     <img src="/assets/shared/img/ff_view_details.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />

4. Copiez la **Public SDK key** depuis l'onglet [**App Settings** -> **General**](https://app.adapty.io/settings/general) dans l'Adapty Dashboard.

   
     <img src="/assets/shared/FF_img/adaptyapikey.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />
   

5. Collez la clé dans le champ **AdaptyApiKey** dans FlutterFlow.

     <img src="/assets/shared/img/ff_apikey.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '400px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />
   

La bibliothèque Adapty FF sera maintenant ajoutée en tant que dépendance à votre projet. Dans la fenêtre de la bibliothèque **Adapty** FF, vous trouverez toutes les ressources Adapty importées dans votre projet.

## Appelez la nouvelle action d'activation au lancement de l'application \{#call-the-new-activation-action-at-application-launch\}

1. Allez dans la section **Custom Code** depuis le menu de gauche et ouvrez `main.dart`.

   
     <img src="/assets/shared/img/ff_dartmain.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

2. Cliquez sur **+** et sélectionnez `activate (Adapty)`.

     <img src="/assets/shared/img/ff_activate.webp"
     style={{
       border: '1px solid #727272', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
   />
   

3. Cliquez sur **Save**.

## Initialiser le plugin Adapty \{#initiate-adapty-plugin\}

Pour qu'Adapty Dashboard reconnaisse votre application, vous devrez fournir une clé spéciale dans FlutterFlow.

1. Dans votre projet FlutterFlow, accédez à **Settings and Integrations > Permissions** depuis le menu de gauche.
2. Dans la fenêtre **Permissions** qui s'ouvre, cliquez sur le bouton **Add Permission**.
3. Dans les champs **iOS Permission Key** et **Android Permission Key**, collez `AdaptyPublicSdkKey`.
4. Pour le **Permission Message**, copiez la **Public SDK key** depuis l'onglet [**App Settings** -> **General**](https://app.adapty.io/settings/general) dans l'Adapty Dashboard. Chaque application possède sa propre clé SDK, donc si vous avez plusieurs applications, assurez-vous de récupérer la bonne.

     <img src="/assets/shared/img/ff_permissions.webp"
     style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
     }}
   />
   

Une fois ces étapes effectuées, vous pourrez appeler votre paywall dans votre application FlutterFlow et activer les achats via celui-ci.

## Quelle est la prochaine étape ? \{#whats-next\}

1. [Créez un flow d'action](ff-action-flow) pour gérer les produits du paywall Adapty et leurs données dans FlutterFlow.
2. [Mappez les données reçues vers le paywall](ff-add-variables-to-paywalls) que vous avez conçu dans FlutterFlow.
3. [Configurez le bouton d'achat](ff-make-purchase) sur votre paywall pour traiter les transactions via Adapty lors d'un clic.
4. Enfin, [ajoutez des vérifications du statut d'abonnement](ff-check-subscription-status) pour déterminer si le contenu payant doit être affiché à l'utilisateur.