English 中文TürkçeРусскийEspañol日本語Tiếng Việt

フローとペイウォールの表示 - Flutter

Flow Builder またはペイウォールビルダーを使ってフローやペイウォールをデザインした場合、モバイルアプリのコードでレンダリングしてユーザーに表示する処理を自分で実装する必要はありません。フローやペイウォールには、表示する内容と表示方法の両方が含まれています。

このガイドはフローおよびペイウォールビルダーのペイウォールを対象としています。リモートコンフィグのペイウォールを表示する場合は、リモートコンフィグで設計したペイウォールのレンダリングを参照してください。

Adapty Flutter SDK では、フローとペイウォールを表示する方法が2つあります。

  • スタンドアロン画面

  • 埋め込みウィジェット

スタンドアロン画面として表示する

フローまたはペイウォールをスタンドアロン画面として表示するには、createFlowView メソッドで作成した view に対して view.present() メソッドを使用します。各 view は一度しか表示できません。非表示にすると、その view はメモリから解放されます。再度フローまたはペイウォールを表示する必要がある場合は、createFlowView を再度呼び出して新しい view インスタンスを作成してください。

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

Adapty SDK がモバイルアプリにどのように統合されているか、実際の例を見てみませんか？ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを実演しているサンプルアプリをご覧ください。

フローまたはペイウォールを閉じる

フローまたはペイウォールをプログラムで閉じる必要がある場合は、dismiss() メソッドを使用します。

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

ビューを閉じると、そのビューはメモリから解放されます。一度閉じたビューは再表示できません。代わりに createFlowView で新しいビューを作成してください。

ダイアログを表示する

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
}

ウィジェット階層への埋め込み

フローやペイウォールを既存のウィジェットツリー内に埋め込むには、AdaptyUIFlowPlatformView ウィジェットを Flutter のウィジェット階層に直接配置します。

AdaptyUIFlowPlatformView(
  flow: flow, // The flow 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) {
  },
  onDidReceiveError: (view, error) {
  },
  onDidFailLoadingProducts: (view, error) {
  },
  onDidFinishWebPaymentNavigation: (view, product, error) {
  },
)

Android のプラットフォームビューを機能させるには、MainActivity が FlutterFragmentActivity を継承していることを確認してください：

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

ペイウォールビルダーでペイウォールをカスタマイズした場合、モバイルアプリのコード側でレンダリングの処理を実装しなくても、ユーザーに表示できます。このようなペイウォールには、表示する内容と表示方法の両方が含まれています。

このガイドは、SDK v3.2.0 以降が必要な新しいペイウォールビルダーのペイウォール専用です。ペイウォールの表示方法は、異なるバージョンのペイウォールビルダーで設計されたペイウォールやリモートコンフィグペイウォールによって異なります。

Adapty Flutter SDK では、ペイウォールの表示方法が2つあります：

  • スタンドアロン画面

  • 埋め込みウィジェット

スタンドアロン画面として表示する

ペイウォールをスタンドアロン画面として表示するには、createPaywallView メソッドで作成した view に対して view.present() メソッドを呼び出します。各 view は一度しか使用できません。再度ペイウォールを表示する必要がある場合は、createPaywallView をもう一度呼び出して新しい view インスタンスを作成してください。

同じ view を再作成せずに再利用すると、AdaptyUIError.viewAlreadyPresented エラーが発生する場合があります。

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

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
}

ウィジェット階層への埋め込み

ペイウォールを既存のウィジェットツリーに埋め込むには、AdaptyUIPaywallPlatformView ウィジェットを Flutter のウィジェット階層に直接配置します。

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

Android のプラットフォームビューを機能させるには、MainActivity が FlutterFragmentActivity を継承していることを確認してください：

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