Después de añadir la librería de Adapty como dependencia a tu proyecto de FlutterFlow, es momento de construir el flujo que recupera los datos del paywall y los productos de Adapty, y los muestra en el paywall que has diseñado en FlutterFlow.

Primero necesitamos recibir los datos del paywall desde Adapty. Empezaremos solicitando el paywall de Adapty, luego sus productos asociados, y finalmente comprobaremos si los datos se recibieron correctamente. Si es así, mostraremos el título y el precio del producto en la página del paywall. En caso contrario, mostraremos un mensaje de error.

Antes de continuar, asegúrate de haber hecho lo siguiente:

1. Crear al menos un paywall y añadir al menos un producto en el Adapty Dashboard.
2. Crear al menos un placement y añadir tu paywall en el Adapty Dashboard.

¡Empecemos!

Paso 1.1. Solicitar el paywall de Adapty

Como se mencionó, para mostrar datos en tu paywall de FlutterFlow, primero necesitamos recuperarlos desde Adapty. El primer paso es obtener el paywall de Adapty. Así se hace:

1. Abre tu pantalla de paywall y cambia a la sección Actions en el panel derecho. Ahí, abre el Action Flow Editor.

2. En la ventana Select Action Trigger, selecciona On Page Load.

3. Haz clic en Add Action. Luego, busca la acción personalizada getPaywall y selecciónala.

4. En la sección Set Actions Arguments, introduce el ID real del placement que has creado en el Adapty Dashboard que incluye el paywall. En este ejemplo es monthly. ¡Asegúrate de usar tu ID de placement real!

5. Si has localizado tu paywall en el dashboard de Adapty, también puedes configurar el argumento locale.

6. En Action Output Variable Name, crea una nueva variable y nómbrala getPaywallResult. La usaremos en el siguiente paso para referenciar el paywall de Adapty y solicitar sus productos.

Paso 1.2. Solicitar los productos del paywall de Adapty

¡Genial! Ya hemos recuperado el paywall de Adapty. Ahora, obtengamos los productos asociados a este paywall:

1. Haz clic en + bajo la acción creada y selecciona Add Action. Esta acción recibirá los productos del paywall de Adapty. Para ello, busca y selecciona getPaywallProducts.

2. En la sección Set Actions Arguments, selecciona la variable getPaywallResult creada anteriormente.

3. Rellena los demás campos de la siguiente manera:

• Available Options: Data Structured Field
• Select Field: value
• Available Options: No further changes

4. Haz clic en Confirm.
5. En Action Output Variable Name, crea una nueva variable y nómbrala getPaywallProductsResult. La usaremos para vincular el paywall que diseñaste en FlutterFlow con los datos del paywall de Adapty.

Paso 1.3. Añadir comprobación de si el paywall se cargó correctamente

Antes de continuar, verifiquemos que el paywall de Adapty se recibió correctamente. Si es así, podemos actualizar el paywall con los datos de los productos. Si no, gestionaremos el error. Así se añade la comprobación:

1. Haz clic en + y luego en Add Conditional.

2. En la sección Action Output, selecciona la variable de salida de acción creada anteriormente (getPaywallResult en nuestro ejemplo).

3. Para verificar que el paywall de Adapty se recibió, comprueba la presencia de un campo con valor. Rellena los campos de la siguiente manera:

• Available Options: Has Field
• Field (AdaptyGetPaywallResult): value

4. Haz clic en Confirm para finalizar la condición.

Paso 1.4. Registrar la visualización del paywall

Para asegurarte de que los análisis de Adapty registran la visualización del paywall, necesitamos registrar este evento. Sin este paso, la visualización no se contabilizará en los análisis. Así se hace:

1. Haz clic en + bajo la etiqueta TRUE y haz clic en Add Action.
2. En el campo Select Action, busca y elige logShowPaywall.

3. Haz clic en Value en el área Set Action Arguments y elige la variable getPaywallResult que hemos creado. Esta variable contiene los datos del paywall.
4. Rellena los campos de la siguiente manera:

• Available Options: Data Structured Field
• Select Field: value

5. Haz clic en Confirm.

Paso 1.5. Mostrar error si el paywall no se recibe

Si el paywall de Adapty no se recibe, necesitas gestionar el error. En este ejemplo, simplemente mostraremos un mensaje de alerta.

1. Añade una acción Informational Dialog a la etiqueta FALSE.

2. En el campo Title, añade el texto que quieras ver como título del diálogo. En este ejemplo, es Error.

3. Haz clic en Value en el cuadro Message.

4. Rellena los campos de la siguiente manera:

• Set Variable: variable getPaywallProductResult que hemos creado
• Available Options: Data Structure Field
• Select Field: error
• Available Options: Data Structure Field
• Select Field: errorMessage

5. Haz clic en Confirm.
6. Añade una acción Terminate action al flujo FALSE.

7. Haz clic en Close en la esquina superior derecha.

¡Felicidades! Has recibido correctamente los datos del producto. Ahora, vincúlalos al paywall que has diseñado en FlutterFlow.