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

El ejemplo usa:

• 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 adaptado para cada segmento de audiencia.
• Un paywall como pantalla final.

El mismo patrón 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. Configurar estilos reutilizables

Los estilos reutilizables te permiten aplicar tipografía y colores coherentes en todas las pantallas con un solo clic. Los estilos de color tienen una variante clara y una oscura, por lo que el flow admite ambos temas de forma automática.

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

Para configurar los estilos:

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

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

2. Crea las pantallas

Un flow es una secuencia de pantallas. Configura la primera pantalla con la base compartida — layout, fondo y área segura — y luego duplícala para las demás. 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 la configuración de pantalla.
2. En System UI, desactiva Safe area para que los fondos y los elementos alineados con los bordes puedan extenderse hasta los extremos de la pantalla.
3. En Fill, elige un tipo de fondo y configúralo — por ejemplo, una Image Image que aparezca detrás de todas las pantallas del flow.
4. En Layout, establece la dirección en Vertical Vertical y elige una distribución que se ajuste a tu diseño.

5. En la sección Screens del panel izquierdo, haz clic en el menú de tres puntos Menú contextual en la primera pantalla y elige Duplicate. Repite hasta tener cuatro pantallas en total — el segundo camino de ramificación se añadirá más adelante duplicando el primero.
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 general: un titular, una lista de características y una llamada a la acción que abre el resto del flow. En nuestro ejemplo, esta 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 título: haz clic en + > Text, elige un estilo de texto de encabezado de tus estilos guardados y edita el campo Content.

3. Añade la lista de características. Haz clic en + > List > Icon Cards, 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 verá 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á dentro de su propio Vertical Stack para que los elementos relacionados se mantengan juntos visualmente.

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

3. Añade la primera pregunta y su campo. Haz clic en + > Text para el título de la pregunta, 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 texto en un Vertical Stack de la misma manera que en la introducción.
6. Añade la segunda pregunta y el quiz. Haz clic en + > Text para el título, luego en + > Quiz y elige una plantilla de disposición como Icon Options. Configura las opciones —en nuestro ejemplo, Rock y Hip hop.
7. Agrupa el título y el quiz en un Vertical Stack de la misma manera.
8. Establece los IDs de cada opción. Selecciona cada opción del quiz, abre la pestaña Interactions y define su Element ID. Estos IDs se usan en la navegación condicional más adelante.

9. Cambia el quiz 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 quiz y establece el tipo en Single choice.

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

5. Crea el primer camino de ramificación

Cada pantalla de camino adapta el contenido a un segmento de audiencia. En nuestro ejemplo, el camino Rock muestra contenido enfocado en ese género: playlists, artistas y recomendaciones.

Para más información sobre 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 debe aparecer 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 selecciona 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 este camino.
4. Añade un botón principal en la parte inferior.

6. Construye la segunda ramificación del flujo

Las pantallas de una ramificación suelen compartir la misma estructura: solo cambia el contenido. Duplica la primera pantalla de la ruta y actualiza el contenido.

Para duplicar y actualizar:

1. En el panel Screens, selecciona la primera pantalla de la ruta 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 texto del cuerpo para el otro segmento de audiencia. El titular personalizado sigue funcionando: la variable se mantiene.

7. Construye el paywall

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

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

1. Añade un Horizontal Stack en la parte superior e inserta un botón Close dentro de él. El preset de Close ya 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 a cada tarjeta un producto 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 aparezca preseleccionado al cargar 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 en Purchase con Product como products.selectedProduct.

6. Añade los enlaces del pie de página. Haz clic en + > Buttons > Links — la fila incluye Restore Purchases, Terms of Use y Privacy Policy. El enlace Restore ya está preconfigurado. Para Terms y Privacy, selecciona el texto de cada enlace en el campo Content, haz clic en el icono de enlace de la barra de formato y pega la URL.

8. Conectar la navegación entre pantallas

Las pantallas no se conectan entre sí automáticamente. Usa los disparadores On tap y las acciones Navigate to para conectar el botón principal de cada pantalla con la siguiente. Una pantalla que se ramifica según la entrada del usuario utiliza 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 compara 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 de ruta.
   • ELSE, activa Navigate to y selecciona la segunda pantalla de ruta.

3. Navegación estática desde cada ruta de bifurcación hasta el paywall. Repite el patrón del paso 1 en cada pantalla de ruta, 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.