---
title: "展示流程与付费墙 - Flutter"
description: "使用 Adapty 的变现功能在 Flutter 应用中展示流程和付费墙。"
---

如果你已经使用流程编辑工具（Flow Builder）或付费墙编辑工具（Paywall Builder）设计了流程或付费墙，则无需在移动应用代码中手动实现渲染逻辑来向用户展示它。这类流程或付费墙本身已经包含了展示内容与展示方式的完整定义。

:::warning

本指南适用于流程和付费墙编辑工具构建的付费墙。如需展示**远程配置付费墙**，请参阅[渲染远程配置设计的付费墙](present-remote-config-paywalls-flutter)。

:::

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

- **独立页面**

- **嵌入式组件**
## 作为独立屏幕展示 \{#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
}
```
## 嵌入到 widget 层级中 \{#embed-in-widget-hierarchy\}

如需将流程或付费墙嵌入到现有的 widget 树中，可以直接在 Flutter widget 层级里使用 `AdaptyUIFlowPlatformView` widget。
```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 提供两种付费墙展示方式：

- **独立页面**

- **嵌入式组件**
## 作为独立页面展示 \{#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\}

如需将付费墙嵌入到现有的组件树中，可以直接在 Flutter 组件层级里使用 `AdaptyUIPaywallPlatformView` 组件。
```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)
    }
}
```
:::

---