Un flow de múltiples pantallas en el Flow Builder es una secuencia de pantallas conectadas por acciones de navegación. El flow puede mantenerse lineal o ramificarse según la entrada del usuario recopilada en una pantalla anterior. Este tutorial recorre el proceso de principio a fin — crear pantallas, construir su contenido, conectar la navegación y añadir ramificaciones condicionales — usando un flow de onboarding de cuatro pantallas como ejemplo práctico.

El ejemplo utiliza:

• Un campo de nombre que expone el nombre del usuario como variable para personalización.
• Un cuestionario de opción única cuya respuesta determina qué pantalla ve el usuario a continuación.
• Dos rutas ramificadas con contenido personalizado para cada segmento de audiencia.
• Un paywall como pantalla final.

El mismo patrón se aplica a cualquier flow que personalice contenido según la entrada del usuario.

¿Prefieres el formato en vídeo? Este tutorial de inicio rápido recorre el mismo proceso de principio a fin:

Antes de comenzar

• Crea productos en el Adapty Dashboard. El ejemplo del flow usa dos: una suscripción Anual y una Mensual.
• Conecta Adapty con App Store y Google Play.

1. Configura los estilos reutilizables

Los estilos reutilizables te permiten aplicar tipografía y colores consistentes en todas las pantallas con un solo clic. Los estilos de color incluyen una variante clara y una oscura, por lo que el flow es compatible automáticamente con ambos temas.

Para ver las instrucciones completas, consulta Estilo de elementos — Estilos reutilizables.

Para configurar los estilos:

1. En el panel izquierdo, abre el panel Styles .
2. En la pestaña Colors, haz clic en Create style y añade los colores que vayas a reutilizar. Para cada color, elige un valor en Light, cambia a la pestaña Dark y elige un valor para Dark.

3. En la pestaña Text, haz clic en un estilo existente para editar su fuente, grosor y tamaño, o haz clic en Create style para añadir preajustes personalizados.

2. Crear las pantallas

Un flow es una secuencia de pantallas. Configura la primera pantalla con la base compartida —diseño, fondo y área segura— y luego duplícala para el resto. Así, todas las pantallas comparten la misma base y solo tienes que configurarla una vez.

Para más información sobre cómo gestionar pantallas, consulta Pantallas y capas — Gestionar pantallas.

Para configurar las pantallas:

1. Haz clic en un área vacía del lienzo en la primera pantalla para abrir los ajustes de pantalla.
2. En System UI, desactiva Safe area para que los fondos y los elementos alineados con los bordes puedan extenderse hasta los bordes de la pantalla.
3. En Fill, elige un tipo de fondo y configúralo; por ejemplo, una Image que aparezca detrás de cada pantalla del flow.
4. En Layout, establece la dirección en Vertical y elige una distribución que se adapte a tu diseño.

5. En la sección Screens del panel izquierdo, haz clic en el menú de tres puntos de la primera pantalla y elige Duplicate. Repite el proceso hasta tener cuatro pantallas en total — la segunda rama se añadirá más adelante duplicando la primera.
6. Renombra cada pantalla según su función — en nuestro ejemplo: Welcome, Quiz, Rock path y Paywall.

3. Construye la pantalla de introducción

La primera pantalla suele marcar el tono: un titular, una lista de características y una llamada a la acción que abre el resto del flow. En nuestro ejemplo, es la pantalla de bienvenida.

Haz clic en la pantalla Welcome en el panel Screens y añade los elementos:

1. Añade la imagen principal. Haz clic en + > Media > Image, sube tu imagen y ajusta los márgenes si es necesario.

2. Añade un titular: haz clic en + > Text, elige un estilo de encabezado de tus estilos de texto guardados y edita el campo Content.

3. Añade la lista de características. Haz clic en + > List > Icon Cards, y luego edita el icono y la etiqueta de cada tarjeta.

4. Añade un botón de navegación principal en la parte inferior. La acción se configurará en el paso de navegación.

4. Construye la pantalla de entrada y cuestionario

La segunda pantalla recoge información del usuario. En nuestro ejemplo, pide un nombre y una respuesta de opción única que determina qué camino ve el usuario a continuación.

Para más información sobre entradas y cuestionarios, consulta Entradas y formularios y Encuestas y cuestionarios.

Haz clic en la pantalla Quiz en el panel Screens, y luego añade los elementos. Cada grupo de la pantalla — introducción, pregunta + entrada, pregunta + cuestionario — está en su propio Contenedor Vertical para que los elementos relacionados se mantengan juntos visualmente.

1. Añade el titular y el cuerpo de la intro. Haz clic en + > Text > H1 para el titular y en + > Text > Body para el texto de apoyo.
2. Agrupa la intro. Haz clic en + > Layout > Vertical Container, arrastra el nuevo contenedor a la parte superior del árbol de capas y luego arrastra el H1 y el cuerpo dentro de él.

3. Añade la primera pregunta y su campo de entrada. Haz clic en + > Text para el título de la pregunta, y luego en + > Inputs > Text para el campo.
4. Establece el Element ID del campo en la pestaña Design — en nuestro ejemplo, name. Esto expone el valor como una variable a la que otras pantallas pueden hacer referencia.

5. Agrupa el título y el campo de entrada en un Contenedor Vertical de la misma forma que la introducción.
6. Añade la segunda pregunta y el quiz. Haz clic en + > Text para el título y luego en + > Quiz para elegir un preset de diseño como Icon Options. Configura las opciones — en nuestro ejemplo, Rock e Hip hop.
7. Agrupa el título y el quiz en un Contenedor Vertical de la misma forma.
8. Establece los IDs de opción. Selecciona cada opción del quiz, abre la pestaña Interactions y asigna su Element ID. Estos IDs se usarán más adelante en la navegación condicional.

9. Cambia el cuestionario a selección única: haz clic en un área vacía del lienzo para abrir Screen settings, desplázate hacia abajo hasta Selectable Groups, haz clic en el nombre del grupo del cuestionario y establece el tipo en Single choice.

10. Añade un botón principal en la parte inferior: este es el botón Siguiente que activa la ramificación.

5. Crea el primer camino ramificado

Cada pantalla de camino adapta el contenido a un segmento de audiencia. En nuestro ejemplo, el camino Rock muestra contenido orientado a ese género: listas de reproducción, artistas y recomendaciones.

Para más información sobre las variables, consulta Variables.

Para crear la pantalla:

1. En el panel Screens, haz clic en la pantalla Rock path.
2. Añade un titular. Coloca el cursor en el campo Content donde quieres que aparezca la personalización, haz clic en el icono de variable y abre la pestaña Elements. Selecciona la pantalla donde está el campo de entrada — en nuestro ejemplo, Quiz — y luego elige la variable de valor del campo. El selector la resuelve como <elementId>.value — en nuestro ejemplo, name.value. En tiempo de ejecución, el titular se actualiza con lo que el usuario haya escrito.

3. Añade el cuerpo del texto como elementos de texto adicionales, adaptados al segmento de audiencia de esta ruta.
4. Añade un botón principal en la parte inferior.

6. Crear la segunda rama del flujo

Las pantallas de cada rama suelen compartir la misma estructura: solo cambia el contenido. Duplica la primera pantalla de la rama y actualiza el texto.

Para duplicar y actualizar:

1. En el panel Screens, selecciona la primera pantalla de la rama y pulsa ⌘D / Ctrl+D para duplicarla. La copia aparece al final de la lista de pantallas.
2. Renombra la copia — en nuestro ejemplo, Hip hop path — y arrástrala al lugar correcto en la lista de pantallas, de modo que quede junto a la pantalla de la que se duplicó.

3. Actualiza el cuerpo del texto para el otro segmento de audiencia. El titular personalizado sigue funcionando — la variable se transfiere automáticamente.

7. Construir el paywall

La última pantalla es el paywall, donde el usuario puede suscribirse. Para un recorrido más completo sobre la mecánica de los paywalls, consulta Crear una pantalla de paywall básica. La versión que se muestra a continuación resume ese recorrido.

Haz clic en la pantalla Paywall en el panel Screens y añade los elementos:

1. Añade un Horizontal Container en la parte superior e inserta dentro un botón Close. El preset Close viene preconfigurado.
2. Añade la imagen principal, el titular (con la misma variable de personalización que en las pantallas de ruta) y un subtítulo como texto de apoyo.

3. Añade los productos: haz clic en + > Products y elige Vertical List. Asigna un producto a cada tarjeta desde el desplegable en la pestaña Design.
4. Haz clic en la tarjeta del producto predeterminado y activa Set as default product para que esté preseleccionado cuando se cargue la pantalla.

5. Añade el botón de compra. Haz clic en + > Buttons y elige un preset. En la pestaña Interactions, haz clic en Add trigger > On tap > Add action y establece Action como Purchase con Product como products.selectedProduct.

6. Añade la plantilla Button > Links a la pantalla. Incluye tres enlaces en el pie: Restore Purchases, Terms of Use y Privacy Policy. El enlace de restauración ya está preconfigurado. Para configurar los demás enlaces, selecciona el elemento de botón, abre la pestaña Interactions y establece el destino para la acción Open URL.

8. Conectar la navegación entre pantallas

Las pantallas no se conectan entre sí de forma automática. Usa los disparadores On tap y las acciones Navigate to para conectar el botón principal de cada pantalla con la siguiente. Las pantallas que ramifican según la entrada del usuario utilizan una Conditional action en su lugar.

Para más información sobre navegación y acciones condicionales, consulta Navegación e interacción y Acciones — Acciones condicionales.

Para conectar la navegación del flow de ejemplo:

1. Navegación estática desde la pantalla de introducción. Abre la pantalla de bienvenida, selecciona el botón principal y cambia a la pestaña Interactions. Haz clic en Add trigger > On tap > Add action, establece Action en Navigate to y elige la siguiente pantalla — en nuestro ejemplo, la pantalla del Quiz.

2. Navegación condicional desde el cuestionario. Abre la pantalla Quiz, selecciona el botón Next y añade un trigger On tap con una Conditional action. Configura la regla IF/ELSE:
   • En el selector de variables, abre la pestaña Elements, selecciona la pantalla Quiz y elige quiz.selectedOptionId.
   • Usa el operador Equals y compáralo con el ID de una de las opciones — en nuestro ejemplo, la opción Rock.
   • IF la comparación coincide, activa Navigate to y selecciona la primera pantalla del camino.
   • ELSE, activa Navigate to y selecciona la segunda pantalla del camino.

3. Navegación estática desde cada rama hacia el paywall. Repite el patrón del paso 1 en cada pantalla de rama, con el paywall como destino.

Próximos pasos

• Guarda y publica tu flow.
• Añade el flow a un placement para empezar a mostrárselo a los usuarios.
• Si quieres flows específicos por audiencia (en lugar de ramificaciones dentro del flow), crea segmentos de audiencia y asigna distintos flows en la página de Placement.