Pass data to flows in Flutter SDK

A custom tag is a custom variable with a value from your app. After you select Value comes from outside the app in a variable’s settings, your app can set its value through the Adapty SDK. For example, a text element contains “Coins:” and a custom tag. If your app passes “120” for the tag, users see “Coins: 120”.

Before you start

You need the Adapty SDK v4 or later. Versions before v4 don’t display flows.

Add custom tags to the flow

To show your app’s values in a flow, set up custom tags in the builder:

Create a custom tag for each value that your app passes.
Insert each tag into a text element.
Note each tag’s full name, including its group. Your app’s code passes each value under this name. For example, if the user group contains a streak tag, the tag’s full name is user.streak.

Pass custom tag values

Pass your app’s values to the customTags parameter of AdaptyUI().createFlowView or AdaptyUIFlowPlatformView, as a Map<String, String>:

Each key is the full name of a custom tag, such as user.streak.
Each value is the string that users see in place of the tag.
Each value must be human-readable, such as “1,250”, not “1250.0”. Adapty doesn’t format or translate it.

The SDK reads the values once, when it creates the view, so they don’t change while the flow is open.

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',
  },
)

A mounted AdaptyUIFlowPlatformView ignores later changes to customTags.

To test your custom tags, open the flow in your app, after you add the code that sets their values. The builder canvas and the preview on devices only show Initial values: the Adapty mobile app doesn’t set custom tag values.

If your app already sets custom tag values for old Paywall Builder paywalls, review how custom tags in flows differ.

What users see without a value

Users see a custom tag’s Initial value as a fallback in the following cases:

Your app passes no value for the tag.
The user hasn’t updated your app to a version that passes the value.
The name in your app’s code doesn’t match the tag’s full name, including letter case.
Another custom tag in the same text element has no value. Then every custom tag in that text element shows its Initial value.

To show nothing in place of a tag, pass an empty string. Adapty treats an empty string as a value, so the fallback doesn’t appear.

Example: show a BMI from onboarding answers

A flow can collect answers from users, and a custom tag can show a value from your app. Combine the two to show users a result that your app calculates from their answers, such as a score, a recommended plan, or a health metric:

A flow collects the answers and sends them to your app.
Your app calculates the result.
Your app passes the result to the next flow as a custom tag value.

In this example, an onboarding flow collects the user’s weight and height. When the user closes the onboarding flow after its last screen, your app calculates their body mass index (BMI). Then it opens a paywall flow that shows the BMI.

Set up the flows

Create two flows: an onboarding flow that collects the user’s weight and height, and a paywall flow that shows their BMI.
Add two Number inputs to the onboarding flow:
- One for the weight in kilograms, with the Element ID weight.
- One for the height in centimeters, with the Element ID height.
For both inputs, set the Format to Integer. An input sends its value as text, exactly as the user types it, and the sample code doesn’t read “70.5” and “70,5” the same way. Whole numbers have no decimal separator, so the code reads them the same in every locale.
To make sure your app receives both values, end the onboarding flow with a screen that has no inputs. On that screen, add a button with the Close flow action. Inputs send their values when they lose focus or when the user moves to another screen. The Close flow action doesn’t send them. The sample code only opens the paywall if the user reached the last screen.
In the paywall flow, create a custom tag named bmi. In the Initial value field, enter a dash (—). Users see the dash if your app passes no BMI.
Add a text element with the words “Your BMI:” to the paywall flow. After these words, insert the bmi custom tag.
Add the onboarding flow to a placement, such as onboarding. Add the paywall flow to a placement with the ID bmi_paywall. The code in Pass the BMI to the paywall fetches the paywall by this ID.

Pass the BMI to the paywall

Collect the weight and the height from the onboarding flow’s flow_user_input events, as in Process data from flows. To know that the user reached the last screen, watch for a flow_screen_showed event with is_last_screen set to true, as in Track flow screen views. When the user closes the onboarding flow after that screen, calculate the BMI. Then create the paywall’s view, and pass the BMI for the bmi custom tag.

Add the following methods to the observer you register with AdaptyUI().setFlowsEventsObserver. The observer must also implement flowViewDidFinishRestore and flowViewDidReceiveError, which this example leaves out:

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 always uses a period as the decimal separator. To use the separator of the user’s locale, format the BMI with NumberFormat from the intl package.

Save the BMI to the user’s profile

To show users different flows based on their BMI, save it as a custom attribute of their profile. In the Adapty Dashboard, create a Number custom attribute with the key bmi. Then show each flow to an audience built from the attribute.

Call the updateProfile method in flowViewDidDisappear, right after the line that calculates bmi. Pass that double, not the formatted string, so that a segment can compare the BMI with a threshold:

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