ステップ1. ペイウォールデータを表示するフローを作成する

FlutterFlowプラグインを使用する場合、Adaptyのペイウォールビルダーで作成したペイウォールは使用できません。FlutterFlowで独自のペイウォールページを実装し、Adaptyと連携させる必要があります。

AdaptyライブラリをFlutterFlowプロジェクトの依存関係として追加したら、次はAdaptyのペイウォールとプロダクトデータをFlutterFlowで設計したペイウォールに取得して表示するフローを構築します。

まずAdaptyからペイウォールデータを受け取る必要があります。最初にAdaptyのペイウォールをリクエストし、次にそれに関連するプロダクトをリクエストし、最後にデータが正常に受信されたかどうかを確認します。成功した場合はペイウォールページにプロダクトのタイトルと価格を表示し、失敗した場合はエラーメッセージを表示します。

先に進む前に、以下の作業が完了していることを確認してください。

Adapty ダッシュボードでペイウォールを少なくとも1つ作成し、プロダクトを少なくとも1つ追加していること。
Adapty ダッシュボードでプレースメントを少なくとも1つ作成し、そのペイウォールを追加していること。

それでは始めましょう！

ステップ1.1. Adaptyペイウォールをリクエストする

前述の通り、FlutterFlowのペイウォールにデータを表示するには、まずAdaptyからデータを取得する必要があります。最初のステップはAdaptyのペイウォール自体を取得することです。手順は以下の通りです。

ペイウォール画面を開き、右ペインの Actions セクションに切り替えます。そこから Action Flow Editor を開きます。

Select Action Trigger ウィンドウで On Page Load を選択します。

Add Action をクリックします。次に、getPaywall カスタムアクションを検索して選択します。

Set Actions Arguments セクションで、ペイウォールを含むAdapity ダッシュボードで作成したプレースメントの実際のIDを入力します。この例では monthly です。必ず実際のプレースメントIDを使用してください！

Adapty ダッシュボードでペイウォールをローカライズしている場合は、locale 引数も設定できます。
Action Output Variable Name で新しい変数を作成し、getPaywallResult という名前を付けます。次のステップでAdaptyのペイウォールを参照してプロダクトをリクエストする際に使用します。

ステップ1.2. Adaptyペイウォールプロダクトをリクエストする

Adaptyのペイウォールを取得しました。次は、このペイウォールに関連するプロダクトを取得しましょう。

作成したアクションの下にある + をクリックし、Add Action を選択します。このアクションでAdaptyペイウォールのプロダクトを受け取ります。getPaywallProducts を検索して選択します。
Set Actions Arguments セクションで、先ほど作成した getPaywallResult 変数を選択します。

残りのフィールドを以下のように入力します。

Available Options: Data Structured Field
Select Field: value
Available Options: No further changes

Confirm をクリックします。
Action Output Variable Name で新しい変数を作成し、getPaywallProductsResult という名前を付けます。FlutterFlowで設計したペイウォールとAdaptyのペイウォールデータをマッピングする際に使用します。