Render paywall designed by remote config in Flutter SDK

If you’ve customized a paywall using remote config, you’ll need to implement rendering in your mobile app’s code to display it to users. Since remote config offers flexibility tailored to your needs, you’re in control of what’s included and how your paywall view appears. We provide a method for fetching the remote configuration, giving you the autonomy to showcase your custom paywall configured via remote config.

Get paywall remote config and present it

In v4, the flow carries a remoteConfigs list — one remote config per configured localization. Pick the entry that matches the user’s locale and extract the needed values. See Localizations and locale codes for picking the right localization.

import 'package:collection/collection.dart'; // for firstWhereOrNull

try {
  final flow = await Adapty().getFlow(placementId: 'YOUR_PLACEMENT_ID');

  // one entry per configured localization; fall back to the first one
  final config = flow.remoteConfigs.firstWhereOrNull((c) => c.locale == 'en') ??
      flow.remoteConfig;

  final String? headerText = config?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

At this point, once you’ve received all the necessary values, it’s time to render and assemble them into a visually appealing page. Ensure that the design accommodates various mobile phone screens and orientations, providing a seamless and user-friendly experience across different devices.

Make sure to record the paywall view event as described below, allowing Adapty analytics to capture information for funnels and A/B tests.

After you’ve done with displaying the paywall, continue with setting up a purchase flow. When the user makes a purchase, simply call .makePurchase() with the product from your paywall. For details on the.makePurchase() method, read Making purchases.

We recommend creating a backup paywall called a fallback paywall. This backup will display to the user when there’s no internet connection or cache available, ensuring a smooth experience even in these situations.

Track paywall view events

Adapty assists you in measuring the performance of your paywalls. While we gather data on purchases automatically, logging paywall views needs your input because only you know when a customer sees a paywall.

To log a paywall view event, simply call .logShowFlow(flow: flow), and it will be reflected in your paywall metrics in funnels and A/B tests.

Calling .logShowFlow(flow: flow) is not needed if you are displaying flows or paywalls created in the builder.

try {
  await Adapty().logShowFlow(flow: flow);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
  // handle the error
}

Request parameters:

Parameter	Presence	Description
flow	required	An `AdaptyFlow` object.

Get paywall remote config and present it

To get a remote config of a paywall, access the remoteConfig property and extract the needed values.

try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID");
  final String? headerText = paywall.remoteConfig?.dictionary?['header_text'] as String?;
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

Make sure to record the paywall view event as described below, allowing Adapty analytics to capture information for funnels and A/B tests.

Track paywall view events

To log a paywall view event, simply call .logShowPaywall(paywall), and it will be reflected in your paywall metrics in funnels and A/B tests.

Calling .logShowPaywall(paywall) is not needed if you are displaying paywalls created in the paywall builder.

try {
  final result = await Adapty().logShowPaywall(paywall: paywall);
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

Request parameters:

Parameter	Presence	Description
paywall	required	An `AdaptyPaywall` object.