---
title: "Flutter SDKでリモートコンフィグで設計したペイウォールを表示する"
description: "Adapty Flutter SDKでリモートコンフィグペイウォールを表示し、ユーザーエクスペリエンスをパーソナライズする方法をご紹介します。"
---

リモートコンフィグを使ってペイウォールをカスタマイズした場合、ユーザーに表示するためにモバイルアプリのコードでレンダリングを実装する必要があります。リモートコンフィグはニーズに合わせた柔軟性を提供するため、何を含めるか、ペイウォールビューをどのように表示するかはすべてあなたが決められます。リモートコンフィグを取得するメソッドを用意しているので、リモートコンフィグで設定したカスタムペイウォールを自由に表示できます。

## ペイウォールのリモートコンフィグを取得して表示する \{#get-paywall-remote-config-and-present-it\}

ペイウォールのリモートコンフィグを取得するには、`remoteConfig` プロパティにアクセスして必要な値を取り出します。

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

必要な値をすべて取得したら、それらをレンダリングして視覚的に魅力的なページに組み立てましょう。さまざまなスマートフォンの画面サイズや向きに対応したデザインにすることで、あらゆるデバイスでシームレスで使いやすい体験を提供できます。

:::warning
以下で説明するように、必ず[ペイウォールビューイベントを記録](present-remote-config-paywalls-flutter#track-paywall-view-events)してください。これにより、Adapty アナリティクスがファネルやA/B テスト用の情報を収集できるようになります。
:::

ペイウォールの表示が完了したら、購入フローの設定に進みます。ユーザーが購入する際は、ペイウォールのプロダクトを使って `.makePurchase()` を呼び出すだけです。`.makePurchase()` メソッドの詳細については、[購入を行う](flutter-making-purchases)をご覧ください。

[フォールバックペイウォールと呼ばれるバックアップペイウォールの作成](flutter-use-fallback-paywalls)をお勧めします。このバックアップは、インターネット接続がない場合やキャッシュが利用できない場合にユーザーに表示され、そのような状況でもスムーズな体験を確保します。

## ペイウォールビューイベントを記録する \{#track-paywall-view-events\}

Adapty はペイウォールのパフォーマンス測定をサポートしています。購入データは自動的に収集されますが、ペイウォールビューのログ記録はあなたの入力が必要です。顧客がペイウォールを見たタイミングを把握しているのはあなただけだからです。

ペイウォールビューイベントをログに記録するには、`.logShowPaywall(paywall)` を呼び出すだけです。ファネルやA/B テストのペイウォール指標に反映されます。

:::important
[ペイウォールビルダー](adapty-paywall-builder)で作成したペイウォールを表示している場合は、`.logShowPaywall(paywall)` を呼び出す必要はありません。
:::

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

リクエストパラメータ：

| パラメータ   | 必須かどうか | 説明                                                           |
| :---------- | :------- |:----------------------------------------------------------------------|
| **paywall** | 必須 | [`AdaptyPaywall`](https://pub.dev/documentation/adapty_flutter/latest/adapty_flutter/AdaptyPaywall-class.html) オブジェクト。        |