Un flow multipantalla en el Flow Builder es una secuencia de pantallas conectadas mediante 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 de principio a fin — 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 de bifurcación con contenido adaptado para cada segmento de audiencia.
• Un paywall como pantalla final.

El mismo patrón se aplica a cualquier flow que personalice el contenido según la información 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 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 admite ambos temas automáticamente.

Para ver las instrucciones completas, consulta Estilos y apariencia — 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 Light, cambia a la pestaña Dark y elige un valor Dark.

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

2. Crea 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 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 que aparezca detrás de todas las pantallas del flow.
4. En Layout, establece la dirección en 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 en la primera pantalla y elige Duplicate. Repite el proceso hasta tener cuatro pantallas en total — la segunda ruta de bifurcación 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 título: 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, 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. Crear la pantalla de entrada y cuestionario

La segunda pantalla recopila información del usuario. En nuestro ejemplo, solicita 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 añade los elementos. Cada grupo de la pantalla — introducción, pregunta + entrada, pregunta + cuestionario — se coloca en su propio Contenedor Vertical para que los elementos relacionados permanezcan 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 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 e input. Haz clic en + > Text para el título de la pregunta, luego haz clic en + > Inputs > Text para el campo.
4. Establece el Element ID del input 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 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, luego haz clic en + > Quiz y elige un preset de diseño como Icon Options. Configura las opciones — en nuestro ejemplo, Rock y Hip hop.
7. Agrupa el título y el quiz en un Contenedor Vertical de la misma forma.
8. Establece los IDs de las opciones. Selecciona cada opción del quiz, abre la pestaña Interactions y establece su Element ID. Estos IDs se utilizan en la navegación condicional más adelante.

9. Cambia el quiz a selección única: haz clic en un área vacía del canvas 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. Crear el primer camino de bifurcación

Cada pantalla de camino adapta el contenido para un segmento de audiencia. En nuestro ejemplo, el camino Rock muestra contenido centrado en el rock: playlists, 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 deba aparecer la personalización, haz clic en el icono de variable y abre la pestaña Elements. Selecciona la pantalla donde se encuentra el input — en nuestro ejemplo, Quiz — y luego selecciona la variable de valor del input. El selector la resuelve como <elementId>.value — en nuestro ejemplo, name.value. En tiempo de ejecución, el titular se actualiza con lo que haya escrito el usuario.

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. Construye el segundo camino de ramificación

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

Para duplicar y actualizar:

1. En el panel Screens, selecciona la primera pantalla del camino 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 forma que quede junto a la pantalla de la que fue duplicada.

3. Actualiza el texto del cuerpo para el otro segmento de audiencia. El titular personalizado sigue funcionando: la variable se mantiene.

7. Crea el paywall

La pantalla final es el paywall, donde el usuario puede suscribirse. Para una guía más completa sobre la mecánica de los paywalls, consulta Crea una pantalla de paywall básica. La versión a continuación resume esa guía.

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 título (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 selecciona 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 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 Restore ya está preconfigurado. Para configurar los demás enlaces, selecciona el elemento de botón, abre la pestaña Interactions y establece el destino de la acción Open URL.

8. Conecta la navegación entre pantallas

Las pantallas no se conectan automáticamente entre sí. Usa los activadores On tap y las acciones Navigate to para vincular el botón principal de cada pantalla con la siguiente. Si una pantalla ramifica el flujo según la entrada del usuario, usa 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 selecciona la siguiente pantalla — en nuestro ejemplo, la pantalla de Quiz.

2. Navegación condicional desde el quiz. Abre la pantalla Quiz, selecciona el botón Next y añade un disparador On tap con una Conditional action. Configura la regla IF/ELSE:
   • En el selector de variables, abre la pestaña Elements, elige la pantalla Quiz y selecciona 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 elige la primera pantalla del recorrido.
   • ELSE, activa Navigate to y elige la segunda pantalla del recorrido.

3. Navegación estática desde cada rama hacia 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.