---
title: "Truyền dữ liệu vào flow trong Flutter SDK"
description: "Truyền một giá trị từ ứng dụng Flutter của bạn vào một flow và hiển thị nó trong phần tử văn bản."
---

> **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`

[Custom tag](flow-custom-tags) là một biến tùy chỉnh với giá trị được lấy từ ứng dụng của bạn. Sau khi bạn chọn **Value comes from outside the app** trong cài đặt của biến, ứng dụng có thể đặt giá trị của nó thông qua Adapty SDK. Ví dụ: một phần tử văn bản chứa "Coins:" và một custom tag. Nếu ứng dụng của bạn truyền "120" cho tag đó, người dùng sẽ thấy "Coins: 120".

## Trước khi bắt đầu \{#before-you-start\}

Bạn cần Adapty SDK v4 trở lên. Các phiên bản trước v4 không hiển thị flow.

## Thêm custom tag vào flow \{#add-custom-tags-to-the-flow\}

Để hiển thị các giá trị của ứng dụng trong một flow, hãy thiết lập custom tag trong builder:

1. [Tạo một custom tag](flow-custom-tags#create-a-custom-tag) cho mỗi giá trị mà ứng dụng của bạn truyền vào.

   <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. [Chèn từng tag vào một phần tử văn bản](flow-custom-tags#add-a-custom-tag-to-a-text-element).
3. Ghi lại tên đầy đủ của từng tag, bao gồm cả nhóm của nó. Code trong ứng dụng của bạn truyền từng giá trị theo tên này. Ví dụ: nếu nhóm `user` chứa tag `streak`, thì tên đầy đủ của tag là `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" />

## Truyền giá trị custom tag \{#pass-custom-tag-values\}

Truyền các giá trị từ ứng dụng của bạn vào tham số `customTags` của `AdaptyUI().createFlowView` hoặc `AdaptyUIFlowPlatformView`, dưới dạng `Map<String, String>`:

- Mỗi key là tên đầy đủ của một custom tag, ví dụ như `user.streak`.
- Mỗi value là chuỗi mà người dùng nhìn thấy thay thế cho tag đó.
- Mỗi value phải ở dạng con người đọc được, ví dụ "1,250" chứ không phải "1250.0". Adapty không tự định dạng hay dịch giá trị này.

SDK đọc các giá trị một lần duy nhất khi tạo view, vì vậy chúng sẽ không thay đổi trong khi flow đang mở.

<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="Nhúng vào cây widget">

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

Một `AdaptyUIFlowPlatformView` đã được mount sẽ bỏ qua các thay đổi sau này đối với `customTags`.

</TabItem>
</Tabs>

Để kiểm tra các custom tag của bạn, hãy mở flow trong ứng dụng sau khi thêm code thiết lập giá trị cho chúng. Canvas của builder và [xem trước trên thiết bị](paywall-device-compatibility-preview#preview-on-devices) chỉ hiển thị giá trị ban đầu: ứng dụng Adapty trên thiết bị di động không thiết lập giá trị cho custom tag.

Nếu ứng dụng của bạn đã thiết lập giá trị custom tag cho các paywall trong Paywall Builder cũ, hãy xem lại [sự khác biệt của custom tags trong flows](migrate-to-flows#custom-tags-from-the-old-paywall-builder).

## Người dùng thấy gì khi không có giá trị \{#what-users-see-without-a-value\}

Người dùng sẽ thấy **Giá trị ban đầu** của thẻ tùy chỉnh như một giá trị dự phòng trong các trường hợp sau:

- Ứng dụng của bạn không truyền giá trị nào cho thẻ đó.
- Người dùng chưa cập nhật ứng dụng lên phiên bản có truyền giá trị.
- Tên trong code của ứng dụng không khớp với tên đầy đủ của thẻ, bao gồm cả chữ hoa/thường.
- Một thẻ tùy chỉnh khác trong cùng phần tử văn bản không có giá trị. Khi đó, mọi thẻ tùy chỉnh trong phần tử văn bản đó đều hiển thị giá trị ban đầu của chúng.

Để không hiển thị gì thay cho thẻ, hãy truyền một chuỗi rỗng. Adapty coi chuỗi rỗng là một giá trị hợp lệ, vì vậy giá trị dự phòng sẽ không xuất hiện.

## Ví dụ: hiển thị chỉ số BMI từ câu trả lời onboarding \{#example-show-a-bmi-from-onboarding-answers\}

Một flow có thể thu thập câu trả lời từ người dùng, và một custom tag có thể hiển thị giá trị từ ứng dụng của bạn. Kết hợp cả hai để hiển thị cho người dùng một kết quả mà ứng dụng của bạn tính toán từ câu trả lời của họ, chẳng hạn như điểm số, gói được đề xuất, hoặc chỉ số sức khỏe:

1. Một flow thu thập câu trả lời và gửi chúng đến ứng dụng của bạn.
2. Ứng dụng của bạn tính toán kết quả.
3. Ứng dụng của bạn truyền kết quả đó sang flow tiếp theo dưới dạng giá trị custom tag.

Trong ví dụ này, một flow onboarding thu thập cân nặng và chiều cao của người dùng. Khi người dùng đóng flow onboarding sau màn hình cuối cùng, ứng dụng của bạn tính chỉ số khối cơ thể (BMI) của họ. Sau đó, ứng dụng mở một flow paywall để hiển thị chỉ số BMI đó.

### Thiết lập flows \{#set-up-the-flows\}

1. [Tạo hai flow](paywall-builder-templates): một flow onboarding thu thập cân nặng và chiều cao của người dùng, và một flow paywall hiển thị chỉ số BMI của họ.
2. Thêm hai ô nhập [**Number**](builder-inputs-and-forms) vào flow onboarding:
   - Một ô để nhập cân nặng tính bằng kilogram, với **Element ID** là `weight`.
   - Một ô để nhập chiều cao tính bằng centimeter, với **Element ID** là `height`.

   Với cả hai ô nhập, đặt **Format** thành **Integer**. Ô nhập gửi giá trị dưới dạng văn bản, đúng như người dùng đã nhập, và [code mẫu](#pass-the-bmi-to-the-paywall) không đọc "70.5" và "70,5" theo cùng một cách. Số nguyên không có dấu phân cách thập phân, vì vậy code đọc chúng giống nhau ở mọi ngôn ngữ.
3. Để đảm bảo ứng dụng nhận được cả hai giá trị, hãy kết thúc flow onboarding bằng một màn hình không có ô nhập nào. Trên màn hình đó, thêm một nút với hành động [**Close flow**](onboarding-actions#close-flow). Các ô nhập gửi giá trị khi mất tiêu điểm hoặc khi người dùng chuyển sang màn hình khác. Hành động Close flow không gửi chúng. Code mẫu chỉ mở paywall nếu người dùng đã đến màn hình cuối cùng.
4. Trong flow paywall, [tạo một custom tag](flow-custom-tags#create-a-custom-tag) có tên `bmi`. Trong trường **Initial value**, nhập một dấu gạch ngang (`—`). Người dùng sẽ thấy dấu gạch ngang này nếu ứng dụng của bạn không truyền BMI.
5. Thêm một phần tử văn bản với nội dung "Your BMI:" vào flow paywall. Sau những từ này, [chèn custom tag `bmi`](flow-custom-tags#add-a-custom-tag-to-a-text-element).
6. Thêm flow onboarding vào một [placement](placements), chẳng hạn như `onboarding`. Thêm flow paywall vào một placement có ID là `bmi_paywall`. Code trong phần [Pass the BMI to the paywall](#pass-the-bmi-to-the-paywall) lấy paywall theo ID này.

### Truyền chỉ số BMI đến paywall \{#pass-the-bmi-to-the-paywall\}

Thu thập cân nặng và chiều cao từ các sự kiện `flow_user_input` của flow onboarding, như được mô tả trong [Xử lý dữ liệu từ flow](flutter-flow-input). Để biết người dùng đã đến màn hình cuối, hãy theo dõi sự kiện `flow_screen_showed` có `is_last_screen` được đặt là `true`, như trong [Theo dõi lượt xem màn hình flow](flutter-flow-screen-views). Khi người dùng đóng flow onboarding sau màn hình đó, hãy tính BMI. Sau đó tạo view cho paywall và truyền BMI vào custom tag `bmi`.

Thêm các phương thức sau vào observer mà bạn đăng ký với `AdaptyUI().setFlowsEventsObserver`. Observer cũng phải triển khai `flowViewDidFinishRestore` và `flowViewDidReceiveError`, nhưng ví dụ này bỏ qua chúng:

```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` luôn dùng dấu chấm làm dấu phân cách thập phân. Để dùng dấu phân cách theo ngôn ngữ của người dùng, hãy định dạng BMI với `NumberFormat` từ package `intl`.

### Lưu chỉ số BMI vào hồ sơ người dùng \{#save-the-bmi-to-the-users-profile\}

Để hiển thị các flow khác nhau cho người dùng dựa trên chỉ số BMI, hãy lưu nó dưới dạng [thuộc tính tùy chỉnh](flutter-setting-user-attributes#custom-user-attributes) của hồ sơ người dùng. Trong Adapty Dashboard, [tạo một thuộc tính tùy chỉnh kiểu **Number**](segments#custom-attributes) với key `bmi`. Sau đó hiển thị từng flow cho một [đối tượng](audience) được xây dựng từ thuộc tính này.

Gọi phương thức `updateProfile` trong `flowViewDidDisappear`, ngay sau dòng tính toán `bmi`. Truyền giá trị `double` đó, không phải chuỗi đã được định dạng, để một phân khúc có thể so sánh chỉ số BMI với ngưỡng nhất định:

```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
}
```