展示流程与付费墙 - Flutter

如果你已创建了流程,或在旧版付费墙编辑工具中创建了付费墙,无需在移动端代码中手动渲染即可向用户展示。此类流程或付费墙本身已包含展示内容和展示方式。

Warning

本指南适用于由 Adapty 渲染的流程和付费墙。如需展示远程配置付费墙,请参阅渲染远程配置设计的付费墙

Adapty Flutter SDK 提供两种展示流程和付费墙的方式:

  • 独立屏幕

  • 嵌入式组件

以独立屏幕形式展示

要将流程或付费墙以独立屏幕形式展示,请对 createFlowView 方法创建的 view 调用 view.present() 方法。每个 view 只能展示一次:关闭后,该视图将从内存中释放。如需再次展示流程或付费墙,请重新调用 createFlowView 创建新的 view 实例,或在 SDK 4.1 及更高版本中使用关闭但不释放的方式。

try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
Tip

想查看 Adapty SDK 集成到移动应用的真实示例?请参阅我们的示例应用,其中演示了完整的配置流程,包括显示付费墙、发起购买以及其他基本功能。

关闭流程或付费墙

如需通过代码关闭流程或付费墙,请使用 dismiss() 方法:

try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
Note

关闭视图会将其从内存中释放——已关闭的视图无法再次显示。请改用 createFlowView 创建新视图。

从 SDK 4.1 起,传入 destroy: false 可保留视图在内存中:

await view.dismiss(destroy: false);

以这种方式保留的视图,再次展示时用户会回到离开时的界面,并保留流程已积累的状态。以这种方式保留的视图会一直持有,直到你使用 destroy: true 将其销毁。

显示对话框

在 Android 上展示流程或付费墙视图时,请使用此方法替代原生的弹窗对话框。在 Android 上,普通弹窗会出现在视图背后,用户无法看到。此方法可确保对话框在所有平台上都能正确显示在流程或付费墙的上方。

try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}

配置 iOS 展示样式

通过向 present() 方法传递 iosPresentationStyle 参数,可以配置流程或付费墙在 iOS 上的展示方式。该参数接受 AdaptyUIIOSPresentationStyle.fullScreen(默认值)或 AdaptyUIIOSPresentationStyle.pageSheet

try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

嵌入到 widget 层级中

如需将流程或付费墙嵌入到现有的 widget 树中,可以直接在 Flutter widget 层级里使用 AdaptyUIFlowPlatformView widget。

AdaptyUIFlowPlatformView(
  flow: flow, // The flow object you fetched
  locale: 'en', // The localization to render the flow with
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidReceiveError: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)
Note

对于 Android 平台视图,请确保你的 MainActivity 继承自 FlutterFragmentActivity

class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

如果你已使用付费墙编辑工具自定义了付费墙,则无需在移动应用代码中手动处理其渲染逻辑来向用户展示它。此类付费墙已包含展示内容及展示方式的完整配置。

Warning

本指南仅涵盖在旧版付费墙编辑工具中为 Adapty SDK 3.x 构建的付费墙,需要 SDK v3.2.0 或更高版本。展示为 SDK 2.x 或更早版本构建的付费墙,或远程配置付费墙,方式有所不同。

Adapty Flutter SDK 提供两种展示付费墙的方式:

  • 独立页面

  • 嵌入式组件

作为独立页面展示

要将付费墙作为独立页面展示,请在由 createPaywallView 方法创建的 view 上调用 view.present() 方法。每个 view 只能使用一次。如果需要再次展示付费墙,请重新调用 createPaywallView 创建新的 view 实例。

Warning

重复使用同一个 view 而不重新创建,可能会导致 AdaptyUIError.viewAlreadyPresented 错误。

try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
Tip

想查看 Adapty SDK 集成到移动应用的真实示例?请参阅我们的示例应用,其中演示了完整的配置流程,包括显示付费墙、发起购买以及其他基本功能。

关闭付费墙

当你需要以编程方式关闭付费墙时,请使用 dismiss() 方法:

try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

显示对话框

在 Android 上展示付费墙视图时,请使用此方法代替原生的提示对话框。在 Android 上,普通提示框会出现在付费墙视图的后面,导致用户看不到它。此方法可确保对话框在所有平台上都能正确显示在付费墙的上方。

try {
  final action = await view.showDialog(
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  );
  
  if (action == AdaptyUIDialogActionType.secondary) {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (e) {
  // handle error
}

配置 iOS 呈现样式

通过向 present() 方法传递 iosPresentationStyle 参数,可以配置付费墙在 iOS 上的呈现方式。该参数接受 AdaptyUIIOSPresentationStyle.fullScreen(默认值)或 AdaptyUIIOSPresentationStyle.pageSheet 两个值。

try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

嵌入到组件层级中

如需将付费墙嵌入到现有的组件树中,可以直接在 Flutter 组件层级里使用 AdaptyUIPaywallPlatformView 组件。

AdaptyUIPaywallPlatformView(
  paywall: paywall, // The paywall object you fetched
  onDidAppear: (view) {
  },
  onDidDisappear: (view) {
  },
  onDidPerformAction: (view, action) {
  },
  onDidSelectProduct: (view, productId) {
  },
  onDidStartPurchase: (view, product) {
  },
  onDidFinishPurchase: (view, product, purchaseResult) {
  },
  onDidFailPurchase: (view, product, error) {
  },
  onDidStartRestore: (view) {
  },
  onDidFinishRestore: (view, profile) {
  },
  onDidFailRestore: (view, error) {
  },
  onDidFailRendering: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)
Note

要使 Android 平台视图正常工作,请确保你的 MainActivity 继承自 FlutterFragmentActivity

class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}