Pasar datos a flows en Flutter SDK

Una etiqueta personalizada es una variable personalizada con un valor de tu app. Después de seleccionar Value comes from outside the app en la configuración de una variable, tu app puede establecer su valor a través del SDK de Adapty. Por ejemplo, un elemento de texto contiene “Coins:” y una etiqueta personalizada. Si tu app pasa “120” para la etiqueta, los usuarios ven “Coins: 120”.

Antes de empezar

Necesitas el SDK de Adapty v4 o posterior. Las versiones anteriores a v4 no muestran flows.

Añadir etiquetas personalizadas al flow

Para mostrar los valores de tu app en un flow, configura etiquetas personalizadas en el builder:

Crea una etiqueta personalizada para cada valor que tu app envíe.
Inserta cada etiqueta en un elemento de texto.
Anota el nombre completo de cada etiqueta, incluido su grupo. El código de tu app pasa cada valor con ese nombre. Por ejemplo, si el grupo user contiene una etiqueta streak, el nombre completo de la etiqueta es user.streak.

Pasar valores de etiquetas personalizadas

Pasa los valores de tu app al parámetro customTags de AdaptyUI().createFlowView o AdaptyUIFlowPlatformView, como un Map<String, String>:

Cada clave es el nombre completo de una etiqueta personalizada, como user.streak.
Cada valor es la cadena que los usuarios verán en lugar de la etiqueta.
Cada valor debe ser legible por humanos, por ejemplo “1,250” en lugar de “1250.0”. Adapty no lo formatea ni traduce.

El SDK lee los valores una vez, cuando crea la vista, por lo que no cambian mientras el flow está abierto.

final customTags = {
  'username': 'DragonSlayer42',
  'coins': '1,250',
};

try {
  final view = await AdaptyUI().createFlowView(
    flow: flow,
    customTags: customTags,
  );
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

AdaptyUIFlowPlatformView(
  flow: flow,
  customTags: const {
    'username': 'DragonSlayer42',
    'coins': '1,250',
  },
)

Un AdaptyUIFlowPlatformView montado ignora los cambios posteriores en customTags.

Para probar tus etiquetas personalizadas, abre el flow en tu app después de añadir el código que establece sus valores. El canvas del builder y la vista previa en dispositivos solo muestran los valores iniciales: la app móvil de Adapty no establece los valores de las etiquetas personalizadas.

Si tu app ya establece valores de etiquetas personalizadas para paywalls del antiguo Paywall Builder, consulta cómo difieren las etiquetas personalizadas en los flows.

Lo que ven los usuarios sin un valor

Los usuarios ven el Valor inicial de una etiqueta personalizada como valor de respaldo en los siguientes casos:

Tu app no pasa ningún valor para la etiqueta.
El usuario no ha actualizado tu app a una versión que envíe el valor.
El nombre en el código de tu app no coincide con el nombre completo de la etiqueta, incluidas las mayúsculas y minúsculas.
Otra etiqueta personalizada en el mismo elemento de texto no tiene valor. En ese caso, todas las etiquetas personalizadas de ese elemento de texto muestran su valor inicial.

Para no mostrar nada en lugar de una etiqueta, pasa una cadena vacía. Adapty trata una cadena vacía como un valor, por lo que el valor de respaldo no aparece.

Ejemplo: mostrar un IMC a partir de las respuestas del onboarding

Un flow puede recoger respuestas de los usuarios, y una etiqueta personalizada puede mostrar un valor de tu app. Combina ambas cosas para mostrar a los usuarios un resultado que tu app calcula a partir de sus respuestas, como una puntuación, un plan recomendado o una métrica de salud:

Un flow recoge las respuestas y las envía a tu app.
Tu app calcula el resultado.
Tu app pasa el resultado al siguiente flow como valor de etiqueta personalizada.

En este ejemplo, un flow de onboarding recoge el peso y la altura del usuario. Cuando el usuario cierra el flow de onboarding tras su última pantalla, tu app calcula su índice de masa corporal (IMC). Luego abre un flow de paywall que muestra el IMC.

Configura los flows

Crea dos flows: un flow de onboarding que recoja el peso y la altura del usuario, y un flow de paywall que muestre su IMC.
Añade dos campos de tipo Number al flow de onboarding:
- Uno para el peso en kilogramos, con el Element ID weight.
- Uno para la altura en centímetros, con el Element ID height.
En ambos campos, establece el Format como Integer. Un campo envía su valor como texto, exactamente tal como lo escribe el usuario, y el código de ejemplo no interpreta “70.5” y “70,5” de la misma manera. Los números enteros no tienen separador decimal, por lo que el código los lee igual en cualquier idioma.
Para asegurarte de que tu app recibe ambos valores, termina el flow de onboarding con una pantalla que no tenga campos. En esa pantalla, añade un botón con la acción Close flow. Los campos envían sus valores cuando pierden el foco o cuando el usuario pasa a otra pantalla. La acción Close flow no los envía. El código de ejemplo solo abre el paywall si el usuario llegó a la última pantalla.
En el flow de paywall, crea una etiqueta personalizada llamada bmi. En el campo Initial value, introduce un guion (—). Los usuarios verán el guion si tu app no pasa ningún IMC.
Añade un elemento de texto con las palabras “Your BMI:” al flow de paywall. Después de esas palabras, inserta la etiqueta personalizada bmi.
Añade el flow de onboarding a un placement, por ejemplo onboarding. Añade el flow de paywall a un placement con el ID bmi_paywall. El código de Pass the BMI to the paywall obtiene el paywall usando este ID.

Pasar el IMC al paywall

Recoge el peso y la altura de los eventos flow_user_input del flow de onboarding, como se explica en Procesar datos de flows. Para saber que el usuario llegó a la última pantalla, observa el evento flow_screen_showed con is_last_screen establecido en true, como se describe en Rastrear vistas de pantallas del flow. Cuando el usuario cierre el flow de onboarding tras esa pantalla, calcula el IMC. Luego crea la vista del paywall y pasa el IMC para la etiqueta personalizada bmi.

Añade los siguientes métodos al observer que registras con AdaptyUI().setFlowsEventsObserver. El observer también debe implementar flowViewDidFinishRestore y flowViewDidReceiveError, que este ejemplo omite:

final Map<String, String> bodyAnswers = {};
bool reachedLastScreen = false;

void flowViewDidReceiveAnalyticEvent(
  AdaptyUIFlowView view,
  String name,
  Map<String, dynamic> params,
) {
  if (name == 'flow_screen_showed' && params['is_last_screen'] == true) {
    reachedLastScreen = true;
    return;
  }
  if (name != 'flow_user_input') return;

  final elementId = params['element_id'];
  final value = params['value'];
  if (elementId is! String || value is! String) return;

  bodyAnswers[elementId] = value;
}

void flowViewDidDisappear(AdaptyUIFlowView view) {
  // The observer receives events from every flow. Reset `bodyAnswers` and
  // `reachedLastScreen` whenever a flow disappears, so that the paywall
  // doesn't open again when the user closes it.
  final answers = Map<String, String>.of(bodyAnswers);
  final finished = reachedLastScreen;
  bodyAnswers.clear();
  reachedLastScreen = false;

  // Number inputs send their values as strings.
  final weight = double.tryParse(answers['weight'] ?? '');
  final height = double.tryParse(answers['height'] ?? '');
  if (!finished || weight == null || height == null || height <= 0) return;

  final heightInMeters = height / 100;
  final bmi = weight / (heightInMeters * heightInMeters);
  showBmiPaywall(bmi.toStringAsFixed(1));
}

Future<void> showBmiPaywall(String bmi) async {
  try {
    final flow = await Adapty().getFlow(placementId: 'bmi_paywall');
    final view = await AdaptyUI().createFlowView(
      flow: flow,
      customTags: {'bmi': bmi},
    );
    await view.present();
  } on AdaptyError catch (e) {
    // handle the error
  } catch (e) {
    // handle the error
  }
}

toStringAsFixed siempre utiliza un punto como separador decimal. Para usar el separador de la configuración regional del usuario, formatea el IMC con NumberFormat del paquete intl.

Guardar el IMC en el perfil del usuario

Para mostrar a los usuarios distintos flows según su IMC, guárdalo como un atributo personalizado de su perfil. En el Adapty Dashboard, crea un atributo personalizado de tipo Number con la clave bmi. Luego muestra cada flow a una audiencia definida a partir de ese atributo.

Llama al método updateProfile en flowViewDidDisappear, justo después de la línea que calcula bmi. Pasa el double, no el string formateado, para que un segmento pueda comparar el IMC con un umbral:

try {
  final builder = AdaptyProfileParametersBuilder()
    ..setCustomDoubleAttribute(bmi, 'bmi');
  await Adapty().updateProfile(builder.build());
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}