---
title: "Primeros pasos"
description: "Empieza con los Feature Flags de Adapty para personalizar los flujos de suscripción."
---

Con Adapty puedes crear y ejecutar paywalls y pruebas A/B en distintos momentos del recorrido del usuario en tu app móvil, como en el onboarding, en los ajustes, etc. Estos puntos se llaman [Placements](placements). Un placement en tu app puede gestionar varios paywalls o [pruebas A/B](ab-tests) a la vez, cada uno diseñado para un grupo concreto de usuarios, lo que denominamos [Audiencias](audience). Además, puedes experimentar con los paywalls, sustituyendo uno por otro a lo largo del tiempo sin publicar una nueva versión de la app. Lo único que tienes que escribir directamente en el código de la app es el ID del 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 biblioteca de Adapty mantiene tu paywall actualizado con los últimos productos de tu Adapty Dashboard. [Obtiene los datos de los productos](ff-action-flow) y [los muestra en tu paywall](ff-add-variables-to-paywalls), [gestiona las compras](ff-make-purchase) y [comprueba el nivel de acceso del usuario](ff-check-subscription-status) para determinar si debe recibir contenido de pago.

Para empezar, solo tienes que [añadir la biblioteca de Adapty](ff-getting-started#add-the-adapty-library-as-a-dependency) a tu proyecto de FlutterFlow e [inicializarla](ff-getting-started#initiate-adapty-plugin) como se muestra a continuación.

:::warning

Antes de comenzar, ten en cuenta las siguientes limitaciones:

- La biblioteca de Adapty para FlutterFlow no es compatible con aplicaciones web. Evita compilar aplicaciones web con ella.
- La biblioteca de Adapty para FlutterFlow no es compatible con paywalls creados con el Paywall Builder de Adapty. Tienes que diseñar tu propio paywall en FlutterFlow antes de habilitar las compras con Adapty.

:::

## Añadir la biblioteca de Adapty como dependencia \{#add-the-adapty-library-as-a-dependency\}

1. En el [FlutterFlow Dashboard](https://app.flutterflow.io/dashboard), abre tu proyecto y haz clic en **Settings and Integrations** en el menú de la izquierda. En la sección **Project setup** a la izquierda, selecciona **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. En la sección **FlutterFlow Libraries**, haz clic en **Add Library** e introduce `adapty-xtuel0`. Haz clic en **Add**.

3. Ahora debes asociar tu clave SDK con la biblioteca. Haz clic en **View details** junto a la biblioteca.

     <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. Copia la **Public SDK key** desde la pestaña [**App Settings** -> **General**](https://app.adapty.io/settings/general) en el 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. Pega la clave en **AdaptyApiKey** en 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 biblioteca de Adapty FF se añadirá como dependencia a tu proyecto. En la ventana de la biblioteca **Adapty** FF encontrarás todos los recursos de Adapty que se han importado a tu proyecto.

## Llamar a la nueva acción de activación al iniciar la aplicación \{#call-the-new-activation-action-at-application-launch\}

1. Ve a la sección **Custom Code** en el menú de la izquierda y abre `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. Haz clic en **+** y selecciona `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. Haz clic en **Save**.

## Inicializar el plugin de Adapty \{#initiate-adapty-plugin\}

Para que el Adapty Dashboard reconozca tu app, deberás proporcionar una clave especial en FlutterFlow.

1. En tu proyecto de FlutterFlow, ve a **Settings and Integrations > Permissions** en el menú de la izquierda.
2. En la ventana **Permissions** que se abre, haz clic en el botón **Add Permission**.
3. En los campos **iOS Permission Key** y **Android Permission Key**, pega `AdaptyPublicSdkKey`.
4. Para el campo **Permission Message**, copia la **Public SDK key** desde la pestaña [**App Settings** -> **General**](https://app.adapty.io/settings/general) en el Adapty Dashboard. Cada app tiene su propia clave SDK, así que si tienes varias apps, asegúrate de coger la correcta.

   
     <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 */
     }}
   />
   

Tras completar estos pasos, podrás mostrar tu paywall en tu app de FlutterFlow y habilitar las compras a través de él.

## ¿Qué sigue? \{#whats-next\}

1. [Crea un flujo de acción](ff-action-flow) para gestionar los productos del paywall de Adapty y sus datos en FlutterFlow.
2. [Mapea los datos recibidos en el paywall](ff-add-variables-to-paywalls) que diseñaste en FlutterFlow.
3. [Configura el botón de compra](ff-make-purchase) en tu paywall para procesar las transacciones a través de Adapty cuando se pulse.
4. Por último, [añade comprobaciones del estado de la suscripción](ff-check-subscription-status) para determinar si mostrar contenido de pago al usuario.