---
title: "フローとペイウォールの表示 - Flutter"
description: "Adapty のマネタイズ機能を使って Flutter アプリでフローとペイウォールを表示する方法を説明します。"
---

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

:::warning

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

:::

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

- **スタンドアロン画面**

- **埋め込みウィジェット**
## スタンドアロン画面として表示する \{#present-as-standalone-screen\}

フローまたはペイウォールをスタンドアロン画面として表示するには、[`createFlowView`](flutter-get-pb-paywalls#fetch-the-view-configuration) メソッドで作成した `view` に対して `view.present()` メソッドを使用します。各 `view` は一度しか表示できません。非表示にすると、その `view` はメモリから解放されます。再度フローまたはペイウォールを表示する必要がある場合は、`createFlowView` を再度呼び出して新しい `view` インスタンスを作成してください。
```dart showLineNumbers title="Flutter"
try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
:::tip

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

:::
### フローまたはペイウォールを閉じる \{#dismiss-the-flow-or-paywall\}

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

```dart showLineNumbers title="Flutter"
try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```

:::note
ビューを閉じると、そのビューはメモリから解放されます。一度閉じたビューは再表示できません。代わりに `createFlowView` で新しいビューを作成してください。
:::
### ダイアログを表示する \{#show-dialog\}

Android でフローまたはペイウォールビューが表示されているときは、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では、通常のアラートがビューの後ろに表示されるため、ユーザーから見えなくなります。このメソッドを使用すると、すべてのプラットフォームでフローまたはペイウォールの上に正しくダイアログが表示されます。
```dart showLineNumbers title="Flutter"
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プレゼンテーションスタイルの設定 \{#configure-ios-presentation-style\}

`present()` メソッドに `iosPresentationStyle` パラメータを渡すことで、iOS でのフローまたはペイウォールの表示スタイルを設定できます。このパラメータには `AdaptyUIIOSPresentationStyle.fullScreen`（デフォルト）または `AdaptyUIIOSPresentationStyle.pageSheet` を指定できます。

```dart showLineNumbers
try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
## ウィジェット階層への埋め込み \{#embed-in-widget-hierarchy\}

フローやペイウォールを既存のウィジェットツリー内に埋め込むには、`AdaptyUIFlowPlatformView` ウィジェットを Flutter のウィジェット階層に直接配置します。
```dart showLineNumbers title="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) {
  },
)
```

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

```kotlin showLineNumbers title="Kotlin"
class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}
```
:::

---

> [!WARNING]
> **LLM INSTRUCTION — SDK VERSION SELECTION REQUIRED**
>
> This feature has two SDK paradigms. Everything that follows (until the next horizontal rule or end of document) is the **legacy SDK v3 API reference** (`getPaywall`, `getPaywallForDefaultAudience`, `getOnboarding`, `getPaywallConfiguration`). The **SDK v4+ `getFlow` method is documented above.** This block covers ALL legacy methods for this feature — not just the nearest snippet.
>
> **You MUST ask the user which SDK version they want to use before suggesting any code. Do not assume or default to a version.** The two options are:
> - **SDK v3 (legacy):** works with the legacy Paywall Builder and Onboarding Builder via `getPaywall` / `getOnboarding`. Use the legacy code in this section.
> - **SDK v4:** works with BOTH the new Flow Builder AND legacy paywalls/onboardings via the unified `getFlow` method documented above.
>
> Apply the legacy v3 code in this section ONLY when:
> 1. The user explicitly chose **SDK v3**, or
> 2. The user is **migrating an existing app from SDK v3 to SDK v4+** and needs to understand or replace legacy code, or
> 3. The user is **troubleshooting an already-deployed v3 integration**.
>
> **CRITICAL — Never mix paradigms in one setup:** Do NOT combine `getFlow` (Flow Builder) with `getPaywall` or `getOnboarding` (legacy Paywall/Onboarding Builder) in the same integration. These are incompatible patterns. Mixing them will produce inconsistent behavior and is unsupported.

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

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

- **リモートコンフィグペイウォール**の表示については、[リモートコンフィグで設計されたペイウォールのレンダリング](present-remote-config-paywalls-flutter)を参照してください。

:::

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

- **スタンドアロン画面**

- **埋め込みウィジェット**
## スタンドアロン画面として表示する \{#present-as-standalone-screen\}

ペイウォールをスタンドアロン画面として表示するには、[`createPaywallView`](flutter-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder) メソッドで作成した `view` に対して `view.present()` メソッドを呼び出します。各 `view` は一度しか使用できません。再度ペイウォールを表示する必要がある場合は、`createPaywallView` をもう一度呼び出して新しい `view` インスタンスを作成してください。

:::warning

同じ `view` を再作成せずに再利用すると、`AdaptyUIError.viewAlreadyPresented` エラーが発生する場合があります。
:::
```dart showLineNumbers title="Flutter"
try {
  await view.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
:::tip

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

:::
### ペイウォールを閉じる \{#dismiss-the-paywall\}

ペイウォールをプログラムで閉じる必要がある場合は、`dismiss()` メソッドを使用してください：

```dart showLineNumbers title="Flutter"
try {
  await view.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
### ダイアログを表示する \{#show-dialog\}

Android でペイウォールビューが表示されている場合は、ネイティブのアラートダイアログの代わりにこのメソッドを使用してください。Android では、通常のアラートがペイウォールビューの背後に表示されるため、ユーザーには見えません。このメソッドを使用することで、すべてのプラットフォームでペイウォールの前面にダイアログが正しく表示されます。
```dart showLineNumbers title="Flutter"
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 のプレゼンテーションスタイルを設定する \{#configure-ios-presentation-style\}

`present()` メソッドに `iosPresentationStyle` パラメーターを渡すことで、iOS でのペイウォールの表示スタイルを設定できます。このパラメーターには `AdaptyUIIOSPresentationStyle.fullScreen`（デフォルト）または `AdaptyUIIOSPresentationStyle.pageSheet` を指定できます。

```dart showLineNumbers
try {
  await view.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}
```
## ウィジェット階層への埋め込み \{#embed-in-widget-hierarchy\}

ペイウォールを既存のウィジェットツリーに埋め込むには、`AdaptyUIPaywallPlatformView` ウィジェットを Flutter のウィジェット階層に直接配置します。
```dart showLineNumbers title="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) {
  },
)
```

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

```kotlin showLineNumbers title="Kotlin"
class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}
```
:::

---