---
title: "在 Flutter SDK 中将数据传入流程"
description: "将 Flutter 应用中的值传入流程，并在文本元素中显示。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`

[自定义标签](flow-custom-tags)是一个自定义变量，其值来自您的应用。在变量设置中选择 **Value comes from outside the app** 后，您的应用可以通过 Adapty SDK 设置该变量的值。例如，一个文本元素包含"Coins:"和一个自定义标签。如果您的应用为该标签传入"120"，用户将看到"Coins: 120"。

## 开始之前 \{#before-you-start\}

您需要使用 Adapty SDK v4 或更高版本。v4 之前的版本不支持显示流程。

## 向流程添加自定义标签 \{#add-custom-tags-to-the-flow\}

要在流程中显示应用的数据，请在编辑工具中设置自定义标签：

1. 为应用传递的每个值[创建一个自定义标签](flow-custom-tags#create-a-custom-tag)。

   <ZoomImage id="flow-custom-tag-create.webp" width="500px" alt="Create variable form with a name, a description, the String value type, and an initial value" />

2. [将每个标签插入文本元素](flow-custom-tags#add-a-custom-tag-to-a-text-element)。
3. 记录每个标签的完整名称，包括其所属分组。应用代码在传递对应值时需使用该名称。例如，若 `user` 分组中包含 `streak` 标签，则该标签的完整名称为 `user.streak`。

   <ZoomImage id="flow-custom-tag-full-name.webp" width="500px" alt="Custom tab of the Add variable dropdown with the streak tag in the user group" />

## 传入自定义标签值 \{#pass-custom-tag-values\}

将应用中的值传入 `AdaptyUI().createFlowView` 或 `AdaptyUIFlowPlatformView` 的 `customTags` 参数，类型为 `Map<String, String>`：

- 每个键是自定义标签的完整名称，例如 `user.streak`。
- 每个值是用户看到的替换文本。
- 每个值必须是易读的格式，例如 "1,250"，而非 "1250.0"。Adapty 不会对其进行格式化或翻译。

SDK 在创建视图时读取一次这些值，因此在流程打开期间不会更新。

<Tabs>
<TabItem value="standalone" label="Standalone screen" default>

```dart showLineNumbers title="Flutter"
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
}
```

</TabItem>
<TabItem value="embedded" label="嵌入到 widget 层级中">

```dart showLineNumbers title="Flutter"
AdaptyUIFlowPlatformView(
  flow: flow,
  customTags: const {
    'username': 'DragonSlayer42',
    'coins': '1,250',
  },
)
```

已挂载的 `AdaptyUIFlowPlatformView` 会忽略后续对 `customTags` 的更改。

</TabItem>
</Tabs>

要测试自定义标签，请在添加设置其值的代码后，在应用中打开流程。编辑工具画布和[在设备上预览](paywall-device-compatibility-preview#preview-on-devices)只显示初始值：Adapty 移动应用不会设置自定义标签的值。

如果你的应用已为旧版付费墙编辑工具的付费墙设置了自定义标签值，请参阅[流程中自定义标签的差异](migrate-to-flows#custom-tags-from-the-old-paywall-builder)。

## 用户在没有值时看到的内容 \{#what-users-see-without-a-value\}

在以下情况下，用户会看到自定义标签的**初始值**作为备用内容：

- 您的应用未为该标签传递任何值。
- 用户尚未将应用更新到能传递该值的版本。
- 应用代码中的名称与标签的完整名称不匹配，包括字母大小写。
- 同一文本元素中的另一个自定义标签没有值。此时该文本元素中的每个自定义标签都会显示其初始值。

如需在标签位置不显示任何内容，请传入空字符串。Adapty 将空字符串视为有效值，因此不会显示备用内容。

## 示例：根据用户引导中的答案显示 BMI \{#example-show-a-bmi-from-onboarding-answers\}

流程可以收集用户的答案，自定义标签可以显示来自你应用的值。将两者结合，即可向用户展示由你的应用根据其答案计算得出的结果，例如得分、推荐套餐或健康指标：

1. 流程收集答案并将其发送给你的应用。
2. 你的应用计算结果。
3. 你的应用将结果作为自定义标签值传递给下一个流程。

在此示例中，一个用户引导流程收集用户的体重和身高。当用户在最后一屏关闭用户引导流程后，你的应用会计算其身体质量指数（BMI）。然后它会打开一个付费墙流程，显示该 BMI 值。

### 设置流程 \{#set-up-the-flows\}

1. [创建两个流程](paywall-builder-templates)：一个用于收集用户体重和身高的用户引导流程，以及一个展示 BMI 的付费墙流程。
2. 在用户引导流程中添加两个 [**Number** 输入框](builder-inputs-and-forms)：
   - 一个用于输入体重（千克），**Element ID** 设为 `weight`。
   - 一个用于输入身高（厘米），**Element ID** 设为 `height`。

   两个输入框的 **Format** 均设为 **Integer**。输入框会将用户输入的内容原样以文本形式发送，[示例代码](#pass-the-bmi-to-the-paywall)对 "70.5" 和 "70,5" 的解析结果并不相同。整数没有小数分隔符，因此在任何语言环境下代码的解析结果都一致。
3. 为确保您的应用能收到两个值，请在用户引导流程的最后添加一个不含输入框的屏幕。在该屏幕上添加一个带有 [**Close flow**](onboarding-actions#close-flow) 操作的按钮。输入框会在失去焦点或用户切换到其他屏幕时发送其值，而 Close flow 操作不会触发发送。示例代码只有在用户到达最后一屏时才会打开付费墙。
4. 在付费墙流程中，[创建一个名为 `bmi` 的自定义标签](flow-custom-tags#create-a-custom-tag)。在 **Initial value** 字段中输入一个破折号（`—`）。如果您的应用未传入 BMI 值，用户将看到该破折号。
5. 在付费墙流程中添加一个文本元素，内容为"Your BMI:"。在这些文字后面[插入 `bmi` 自定义标签](flow-custom-tags#add-a-custom-tag-to-a-text-element)。
6. 将用户引导流程添加到某个[版位](placements)，例如 `onboarding`。将付费墙流程添加到 ID 为 `bmi_paywall` 的版位。[将 BMI 传递给付费墙](#pass-the-bmi-to-the-paywall)中的代码通过此 ID 获取付费墙。

### 将 BMI 传递给付费墙 \{#pass-the-bmi-to-the-paywall\}

从用户引导流程的 `flow_user_input` 事件中收集体重和身高数据，具体方法请参阅[处理流程数据](flutter-flow-input)。若要判断用户是否到达最后一屏，可监听 `flow_screen_showed` 事件，并检查 `is_last_screen` 是否为 `true`，具体方法请参阅[追踪流程页面浏览](flutter-flow-screen-views)。当用户在该屏后关闭用户引导流程时，计算 BMI，然后创建付费墙视图，并将 BMI 传入 `bmi` 自定义标签。

将以下方法添加到你通过 `AdaptyUI().setFlowsEventsObserver` 注册的观察者中。该观察者还必须实现 `flowViewDidFinishRestore` 和 `flowViewDidReceiveError`，本示例中未包含这两个方法：

```dart showLineNumbers title="Flutter"
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` 始终使用句点作为小数分隔符。如需使用用户语言环境的分隔符，请使用 `intl` 包中的 `NumberFormat` 格式化 BMI。

### 将 BMI 保存到用户画像 \{#save-the-bmi-to-the-users-profile\}

要根据用户的 BMI 展示不同的流程，请将其作为[自定义属性](flutter-setting-user-attributes#custom-user-attributes)保存到用户画像中。在 Adapty 看板中，[创建一个 **Number** 类型的自定义属性](segments#custom-attributes)，键名设为 `bmi`。然后为每个流程创建一个基于该属性的[目标受众](audience)。

在 `flowViewDidDisappear` 中调用 `updateProfile` 方法，紧接在计算 `bmi` 的那行代码之后。传入 `double` 值而非格式化后的字符串，这样市场细分才能将 BMI 与阈值进行比较：

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